使用 CSS 或 JS 单击 link 时显示段落

Question

我正在尝试在页面左侧创建一个包含功能和升级列表的分区，在页面右侧创建一个包含这些功能描述的框。基本上，我试图做到这一点，以便当我单击（或悬停）其中一个功能时，框中的文本将更改为有关该特定功能的段落。

我不知道是否最好尝试使用 javascript 将所有描述的类更改为 'display: none' 除了被点击的描述在。或者也许有一种简单的方法，只需将 link 标签和类添加到我的所有列表项并使用 CSS?

这是我的 W3schools http://www.w3schools.com/code/tryit.asp?filename=FAXQLP79PMJX - 我基本上是在努力做到这一点，这样当我单击项目 'Real time monitoring, in process' 时，当前位于灰色框中的文本就会出现。但如果我点击不同的项目，该文本就会消失，并会出现新的描述。

我尝试查看此处的其他类似问题，但当 hover/clickable 项目是您要显示的项目的父项时，它们似乎都有效 - 但此处并非如此。谢谢

编辑：这是列表的简短版本，后面是我希望文本出现的部分

<div>  
               <p>Standard Features</p>
               <ul>
                <li>Real time monitoring, in process</li>
                <li>High speed, 1st order analysis</li>
                <li>Robust design</li>
                <li>Non-intrusive (Excludes B-Series)</li>
                <li>Withstand corrosive environments</li>
                <li>National Instruments Labview platform</li>
                </ul>
</div>
               <p class="ms_item_header">Click on a feature to learn more</p>
               <p class = "ms_item_001">Display this when they click on the first feature</p>
               <p class = "ms_item_002">Display this instead when they click on the second feature</p>
<div>
</div>

Answer 1

试试这个例子

$(document).ready(function(){
$('.clickButtons').click(function() {
  $("p.textC").attr('style','display:none;')
     var index = $("li").index(this); $("p.textC").eq(index).attr('style','display:block;')

});
});

p#blueOne{
  color:blue;
}
p#redOne{
  color:red;
  display:none;;
}
.textC{
  top:5px;
}
.clickButtons{
  cursor:pointer;
}
.textCon{
  position:relative;
  border:1px solid black;
  height:100px;
  padding:0 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li class="clickButtons">Item 1</li>
    <li class="clickButtons">Item 2</li>
    </ul>
  <div class="textCon">
  <p id="blueOne" class="textC">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed</p>
    <p id="redOne" class="textC">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make.</p>
  </div>
  </div>

使用 CSS 或 JS 单击 link 时显示段落

Making a paragraph display when clicking on a link with either CSS or JS

javascript

css

onclick

hover

display