1

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

除了一个错误之外，它可以工作：也就是说，它会显示和隐藏它自己的选项卡，但由于某种原因，当单击第二个选项卡时，它会更改所有选项卡的状态。

    <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>
4

1 回答 1

1

问题是 $('.sub2. div') 将选择所有具有 sub2 类的标签，包括第二个选项卡菜单中的标签，我将选择器更改为 prev() 和 next() 并且它似乎有效。 http://jsfiddle.net/kswishaq/2yZYT/

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

ps您的 html 代码中有两个额外的标签。

于 2012-08-21T03:18:05.997 回答