1

これは、同じページの複数の要素に適用できるタブ付きの UI を意図しています。

1 つのバグを除いて機能します。つまり、独自のタブを表示および非表示にしますが、何らかの理由で 2 番目のタブをクリックすると、すべてのタブのステータスが変更されます。

    <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