问使用CSS或JS单击链接时显示段落
EN

Stack Overflow用户

提问于 2016-12-20 08:53:05

回答 1查看 894关注 0票数 0

我正在尝试创建一个分区，其中包含页面左侧的功能和升级列表，以及页面右侧包含这些功能描述的框。基本上，我试图使它，以便当我点击(或悬停)在其中一个功能-文字在方框将更改为段落有关的特定功能。

我不知道是否最好使用javascript将所有描述的类更改为“display:none”，除了单击的那个。或者，有一种简单的方法可以通过将链接标签和类添加到我所有的列表项中并使用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>

display

javascript

css

onclick

hover

腾讯云会员中心

加入腾讯云会员，每月可领会员专属优惠券；会员云产品免费体验；云产品会员专享价；会员签到抽奖…

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-12-20 09:10:43

试试这个例子

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