マウスがタブ内に移動すると、ユーザーが不注意でマウス操作を行うのを防ぐために、対応する項目に切り替わるまでに一定の遅延が発生します。また、レンダリング: を切り替えることもできます。 ソースコード: コードをコピー コードは次のとおりです: ="http://www.w3.org/1999/xhtml"> タブ切り替え <br>body{background:#fff;} <br>*{マージン:0 ; パディング:0;} <br>.box{ マージン:20px; } <br>.container{background:#FFF; _margin-top:- 1px;} <br>.sub-con{高さ:300px;幅:500px;ボーダー:1px 背景:#FFF;} <br>.cur-sub-con{display:block; } <br>.sub-con a{ line-height:40px} <br>.sub-con p{ text-align:center} <br>.nav{ width:370px height:28px; ;} <br>.nav ul{幅: 370px; 高さ: 28px;} <br>.nav ul li{ 表示: インライン ブロック; 幅: 28 ピクセル; 行の高さ: 28px; text -align:center;margin-left:-9px;*float:left;*margin-left:-1px;} <br>.nav ul li a{background:#fff;border:1px Solid #3CF;テキスト装飾:なし; カラー:#000; 高さ:28px; 表示:ブロック;} <br>.nav ul li a:hover{ 背景:#CCEDFB} <br>.nav ul li a.cur{ z-index :9999; ボーダーボトム:1px カラー:#F00;} <br> タブ項目 1 タブ項目 2 タブ項目 3 タブ項目 4 sub-con "> これはコンテナ 1 これはコンテナ 2< ;/p> ; これはコンテナ 3 これはコンテナ 4 <br>$(document).ready(function(){ <br>var intervalID; <br>var curLi; <br>$(".nav li a") .mouseover(function(){ <br>curLi=$(this); <br>intervalID=setInterval(onMouseOver,250);//マウスが移動すると、マウスに切り替わるまでに一定の遅延が発生します。ユーザーが誤ってアクセスできないようにするためのアイテムです。 Operation<br>}); >$(".sub -con").eq($(".nav li a").index(curLi)).addClass("cur-sub-con"); .removeClass("cur" ); <br>curLi.addClass("cur"); <br>$(".nav li a").mouseout(function(){ <br>clearInterval(intervalID) ; <br>}) ; <br><br>$(".nav li a").click(function(){//マウスクリックでも <br>clearInterval(intervalID); <br>$(" .cur-sub-con ").removeClass("cur-sub-con"); <br>$(".sub-con").eq($(".nav li a").index(curLi)) .addClass("cur-sub-con"); <br>$(".cur").removeClass("cur"); <br>curLi.addClass("cur"); ><br>}) ; <br><br><br><br> </div>
を切り替えることもできます。 
< ;/p> ;