Question

我正在为我的网页使用脚本，我想通过点击此链接上给出的锚标记来显示和隐藏一些div。这正是我所寻找的，但它不能正常工作，因为我将它复制到我的网页上。

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

这里是js小提琴： here

这是脚本代码

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

你可以通过将事物链接在一起并使用一些类似的代码来编写更少的代码：

<强> 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;
}

FIDDLE

NEW UPDATE

另外请确保您在页面底部包含您的脚本，或者您可以在脚本之前将所有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 个答案: