单击带有 CSS 或 JS 的链接时显示段落

Question

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

我不知道是否最好尝试使用 javascript 将所有描述的类更改为“显示：无”，除了被点击的描述。或者也许有一种简单的方法，只需将链接标签和类添加到我的所有列表项并使用 CSS？

这是我的 W3schools http://www.w3schools.com/code/tryit.asp?filename=FAXQLP79PMJX - 我基本上是在尝试这样做，以便当我单击“实时监控，进行中”项目时，会出现当前位于灰色框中的文本。但是，如果我点击不同的项目，该文本会消失，并且会出现新的描述。

我尝试在此处查看其他类似问题，但当悬停/可点击项目是您要显示的项目的父项时，它们似乎都有效 - 这不是这里的情况。谢谢

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

<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>