Question

这是一个标签式的UI，可以应用于同一页面上的多个元素。

除了一个bug之外它有效：也就是说，它会显示并隐藏它自己的标签，但出于某种原因，当点击第二个标签时，它会改变所有标签的状态。

    <html>
<head>
<title>super tabbed menu</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <script>
$(document).ready(function(){

$('.sub').click(
function () {

$('.mydiv', this).show();
$('.sub2. div').hide();

});


$('.sub2').click(
function () {

$('.mydiv2', this).show();

$('.sub div').hide();       
});

 });

</script>
<style>
.sub{float:left;padding-left:10px;}

.sub2{float:left;padding-left:10px;}
.mydiv{display:none;position:absolute; float:left;}
.mydiv2{display:none;position:absolute;background-color:grey;float:left;}
.showit{display:block}
</style>

</head>
<body>


  <div class="sub">
  <a class="thing" href="#" >this thing will make only one thing appear</a>
    <div class="mydiv">mydiv</div>  
</div>

     <div class="sub2">
     <a class="thing2" href="#" >this thing will make only one thing appear</a>
     <div class="mydiv2">mydiv2</div>  
    </div>


  </div>
<br/>
<br/><br/><br/><br/><br/>
<!--  ************************ -->
  <div class="sub">
  <a class="thing" href="#" >this thing will make only one thing appear</a>
    <div class="mydiv">mydiv</div>  
</div>

     <div class="sub2">
     <a class="thing2" href="#" >this thing will make only one thing appear</a>
     <div class="mydiv2">mydiv2</div>  
    </div>


  </div>

</body>

</html>

Answer 1

问题是$（'。sub2.div'）将选择所有带有sub2类的标签，包括第二个标签菜单中的标签，我将选择器更改为prev（）和next（），它似乎工作。 http://jsfiddle.net/kswishaq/2yZYT/

然而，这个解决方案的一个限制是sub2必须在sub1之后。要解决这个问题，我建议你将标签包装在一个div中，这样你就可以调用兄弟姐妹（“sub”）来选择附近的标签。

。在你的html代码中有两个额外的标签。

多个选项卡中的唯一选择

1 个答案: