jQuery模拟简单的qqtab窗口
css样式
<style type="text/css">
ul{ list-style-type:none;}
.head{ background-color:Blue; cursor:pointer;}
.body{ border-color:Blue; border-style:solid; border-width:2px;}
</style>
js代码
<script type="text/javascript">
$(function () {
$("#qq li:odd").addClass("body"); //奇数行
$("#qq li:even").addClass("head").click(function () {//偶数行
$(this).next("li.body").show(1).siblings("li.body").hide(1);
});
$("#qq li:first").click();//模拟点击
});
</script>
HTML代码
<body>
<ul style=" width:200px;" id="qq">
<li>我的好友</li>
<li>张三<br />李四<br />旺旺<br /></li>
<li>我得同学</li>
<li>张龙<br />赵虎<br />王朝<br /></li>
<li>陌生人</li>
<li>马汉<br />王五<br />马六<br /></li>
</ul>
</body>
运行效果
