单击其他div时显示/隐藏多个div

Question

我正在为我的网页使用脚本，我想通过单击此链接中给出的锚标记来显示和隐藏一些div。 这正是我在寻找的东西，但是由于我将其复制到网页上而无法正常工作。

可能是我必须为此或任何其他脚本源添加一些jquery插件。 一切都在处理示例，但不在我的页面上，请告诉我我在哪里缺少什么

这是js小提琴： 这里

这是脚本代码

$('.targetDiv').hide();
$('.targetDiv').first().show();
$('.showSingle').first().addClass('selected');
$('.showSingle').click(function () {
$('.targetDiv').hide();
$('.showSingle').removeClass('selected');
$('#div' + $(this).attr('target')).show();
$(this).addClass('selected');
});

更新

<html>
<head>

<script>
$("a").click(function(){
$(this).addClass("selected").siblings().removeClass("selected");

var pullNumber = $(this).attr("target");

$("#div"+pullNumber).show().siblings(".targetDiv").hide();

});

</script>

<style>
.buttons .selected {
color: red;
}

</style>
</head>

<body>



<div class="buttons">
<a  class="showSingle" target="1">Option 1</a>
<a  class="showSingle" target="2">Option 2</a>
<a  class="showSingle" target="3">Option 3</a>
<a  class="showSingle" target="4">Option 4</a>
</div>

<div id="div1" class="targetDiv">Lorum Ipsum 1</div>
<div id="div2" class="targetDiv">Lorum Ipsum 2</div>
<div id="div3" class="targetDiv">Lorum Ipsum 3</div>
<div id="div4" class="targetDiv">Lorum Ipsum 4</div>

</body>
</html>

Answer 1

您可以通过将事物链接在一起并使用如下CSS来用更少的代码编写代码：

JS

$("a").click(function(){
  $(this).addClass("selected").siblings().removeClass("selected");
  var pullNumber = $(this).attr("target");    
  $("#div"+pullNumber).show().siblings(".targetDiv").hide();    
});

的CSS

.buttons .selected {
  color: red;
}

.targetDiv{
  display: none;
}

div:nth-of-type(2){
  display:block;
}

小提琴

新更新

另外，请确保您在页面底部添加了脚本，或者可以将所有JS封装在AND中 ，并在脚本之前包含jquery：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>

<script type="text/javascript">
  $(document).ready(function(){
     //JS code
    $("a").click(function(){
      $(this).addClass("selected").siblings().removeClass("selected");
      var pullNumber = $(this).attr("target");    
      $("#div"+pullNumber).show().siblings(".targetDiv").hide();    
    });
  });
</script>

单击其他div时显示/隐藏多个div

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-12-27 05:35:06

单击其他div时显示/隐藏多个div

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-12-27 05:35:06

解决方案1
0 已采纳 2014-12-27 05:35:06