jQ tab切替効果を実現
実装効果:異なるナビゲーション対応が異なる領域に切り替わる
考え方:
ナビゲーションは一般的にulリストを使用し、対応領域はdivを使用し、このように実現するのが便利である.
ナビゲーションがハイライトされている場合、他の兄弟liラベルのスタイルはデフォルトのスタイルです.
ハイライトナビゲーション対応領域div表示(display:block;)の場合、他の兄弟divタグは非表示(display:none;);
ulのサブエレメントli個数の個数は和であるべきである.oDivの下のdivの個数は同じで、一つ一つ対応しています.
知識点:
$(this).index();//liの下付き記号($(this)を取得すると、呼び出した人は誰を指しますか.そうしないとwindowsを指します.
eq(1);//jQueryの中の方法は、1つ目を選びます
addClass();//要素にclass名を追加
siblings();//自分以外の兄弟ラベルを選択
removeClass();//要素のclass名を削除
考え方:
ナビゲーションは一般的にulリストを使用し、対応領域はdivを使用し、このように実現するのが便利である.
ナビゲーションがハイライトされている場合、他の兄弟liラベルのスタイルはデフォルトのスタイルです.
ハイライトナビゲーション対応領域div表示(display:block;)の場合、他の兄弟divタグは非表示(display:none;);
ulのサブエレメントli個数の個数は和であるべきである.oDivの下のdivの個数は同じで、一つ一つ対応しています.
知識点:
$(this).index();//liの下付き記号($(this)を取得すると、呼び出した人は誰を指しますか.そうしないとwindowsを指します.
eq(1);//jQueryの中の方法は、1つ目を選びます
addClass();//要素にclass名を追加
siblings();//自分以外の兄弟ラベルを選択
removeClass();//要素のclass名を削除
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.oUl{
overflow: auto;
zoom: 1;
margin-bottom:10px;
}
.oUl li{
cursor: pointer;
float: left;
height:20px;
width:20px;
padding: 10px;
margin-right:10px;
background-color: gray;
}
.oUl li.active{
color: red;
}
.oDiv{
height:200px;
width:200px;
border: 1px solid #000;
}
.oDiv div{
display: none;
}
.oDiv div.active{
display: block;
}
</style>
<ul class="oUl">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="oDiv">
<div class="one active">
one
</div>
<div class="two">
two
</div>
<div class="three">
three
</div>
</div>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"/>
<script type="text/javascript">
$(".oUl li").on("click",function(){
var i = $(this).index();// li
$(".oUl li").eq(i).addClass("active").siblings().removeClass("active");
$(".oDiv>div").eq(i).addClass("active").siblings().removeClass("active");
});
</script>
</code></pre>
<p><br/> ， ，tab 。</p>
<p> </p>
</div>
</div>
</div>
</div>