您的位置：首页 > 其它

选项卡效果

2015-10-08 15:23 253 查看
例子一、

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡效果</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
body{font-size:13px}
ul,li{margin:0;padding:0;list-style:none}
#menu li{text-align:center;float:left;padding:5px;margin-right:2px;width:50px;cursor:pointer}
#menu li.tabFocus{width:50px;font-weight:bold;background-color:#f3f2e7;border:solid 1px #666;border-bottom:0;z-index:100;position:relative}
#content{width:260px;height:80px;padding:10px;background-color:#f3f2e7;clear:left;border:solid 1px #666;position:relative;top:-1px}
#content li{display:none}
#content li.conFocus{display:block}
</style>
</head>
<body>
<ul id="menu">
<li class="tabFocus">家居</li>
<li>电器</li>
<li>二手</li>
</ul>
<ul id="content">
<li class="conFocus">这是家居的内容</li>
<li>这是电器的内容</li>
<li>这是家居的内容</li>
</ul>
<script type="text/javascript">
$(function(){
$('#menu li').each(function(index){
$(this).click(function(){
$('#menu li.tabFocus').removeClass('tabFocus');
$(this).addClass('tabFocus');
$('#content li:eq('+index+')').show().siblings().hide();
})
});
});
</script>
</body>
</html>


例子 二、

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="jquery.min.js"></script>
<style>
*{margin:0;padding:0;}
.tab{width:240px;margin:50px;}
.tab_menu { clear:both;}
.tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;}
.tab_menu li.hover { background:#DFDFDF;}
.tab_menu li.selected { color:#FFF; background:#6D84B4;}
.tab_box { clear:both; border:1px solid #898989; height:100px;}
.hide{display:none}
</style>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">时事</li>
<li>体育</li>
<li>娱乐</li>
</ul>
</div>
<div class="tab_box">
<div>时事</div>
<div class="hide">体育</div>
<div class="hide">娱乐</div>
</div>
</div>
<script>
$(".tab_menu ul li").hover(function(){
$(this).addClass("selected").siblings().removeClass("selected");
var index=$(".tab_menu ul li").index(this)
$(".tab_box div").eq(index).show().siblings().hide();
})
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航