您的位置：首页 > Web前端 > JQuery

jquery实现标签切换效果

2011-03-01 22:36 721 查看

$("ul > li").hover(tab);

function tab() {
$(this).addClass("ll").siblings().removeClass("ll");
var tab = $(this).attr("title");
$("#" + tab).show().siblings().hide();
};

li中和title必须和div中的id一致！

<script type="text/javascript" src="jquery-132min2.js"></script>
<script type="text/javascript">
$(function() {
$("ul > li").click(tab);

function tab() {
$(this).addClass("ll").siblings().removeClass("ll");
var tab = $(this).attr("title");
$("#" + tab).show().siblings().hide();
};
});
</script>
</head>
<body>
<ul>
<li class="ll" title="d1">1</li>
<li title="d2">2</li>
<li title="d3">3</li>
</ul>

<div>
<div id="d1">11111</div>
<div id="d2" style="display:none">22222</div>
<div id="d3" style="display:none">33333</div>
</div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航