jQuery单击菜单并显示/隐藏div

Question

我需要帮助来解决这个jQuery问题。我有一个用bootstrap创建的菜单，我需要在菜单项中单击时显示div，并隐藏其他菜单。对于菜单A B C，div为A B C.它们必须显示在空白空间中。

<ul class="nav nav-pills nav-stacked">
  <li id="a-btn" class="active"><a href="#"><i class="glyphicon glyphicon-     dashboard"> </i>A</a></li>
  <li id="b-btn"><a href="#"><i class="glyphicon glyphicon-cd"> </i>B</a></li>
  <li id="c-btn"><a href="#"><i class="glyphicon glyphicon-facetime-video"> </i>C</a></li>
</ul>

<div id="a-div"></div>
<div id="b-div"></div>
<div id="c-div"></div>

Answer 1

试试这个。

＆＃13;

＆＃13;

jQuery(function($){
    $("ul li").click(function(){
        var id = $(this).attr("id");
    
        $(".wrapper > div").removeClass("visible");
        $(".wrapper > div." + id).addClass("visible");
    });
});

＆＃13;

ul{
  padding: 0;
  margin-bottom: 10px;
}
ul li{
  cursor: pointer;
  list-style: none;
}

ul li:hover{
  color: blue;
}

.wrapper > div{
  width: 100px;
  height: 100px;
  display: none;
}
.wrapper > div.visible{
  display: block;
}
.wrapper > div.purple{
  background-color: purple;
}
.wrapper > div.green{
  background-color: green;
}
.wrapper > div.blue{
  background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul>
  <li id="purple">A</li>
  <li id="green">B</li>
  <li id="blue">C</li>
</ul>

<div class="wrapper">
  <div class="purple visible"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我用自己的代码解决了这个问题：

Rc