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

jQuery选项卡的实现（代码简短的）

2013-04-01 19:21 302 查看

<html>

<head>

<meta charset="utf-8"/>

<style>

*{margin:0;padding:0}

body{font-size:15px}

.tab{margin:50px auto;width:300px}

li{list-style:none;height:30px;width:50px;border:1px solid #f50;float:left;margin-left:10px;background:#ccc;border-bottom:none}

.tab_content{clear:both;border:1px solid #000;margin-left:10px;padding:10px;height:200px}

.sport{display:none}

.thing{display:none}

.tab_selected{background:#5FFFFF}

.hover{background:#9f0}

</style>

<script type="text/javascript" src="./script/jquery-1.4.2.min.js"></script>

<script>

$(function(){

var $li=$("div.tab_menu ul li");

$li.click(function(){

var $index=$li.index(this);

$("div.tab_content div").eq($index).show().siblings().hide();

$(this).addClass("tab_selected").siblings().removeClass("tab_selected");

}).hover(function(){

$(this).addClass("hover");

},function(){

$(this).removeClass("hover");

});

});

</script>

</head>

<body>

<div class="tab">

<div class="tab_menu">

<ul>

<li class="tab_selected">时事</li>

<li>体育</li>

<li>娱乐</li>

</ul>

</div>

<div class="tab_content">

<div>时事</div>

<div class="hide">体育</div>

<div class="hide">娱乐</div>

</div>

</div>

</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航