Juery实现选项卡

选项卡是一种很常用的组件。比如3个选项的选项卡，比较笨的一种办法是，把3个状态写成3个独立页面，互相链接。这样做的问题也显而易见，切换的时候url会变。如果是手机端网页，加载慢一点，给人的感觉是不断的跳网址，加载网页。

选项卡就解决了这个问题，选项卡是在1个页面一次加载，再在这个页面里操作，隐藏显示元素。原生的js实现起来比较麻烦，如果利用jquery，就很简单了。下面是最简单的选项卡。

 

代码非常简单：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.current{background:#900;}
ul{list-style-type:none;height:30px;padding:0;}
ul li{
	width:80px;
	height:30px;
	line-height:30px;
	float:left;
	text-align:center;
	}
	
#content>div{border:1px solid #00F;width:300px;height:300px;display:none;}
</style>
</head>

<body>
    <div>
    	<ul>
        	<li class="current">选项1</li>
            <li>选项2</li>
            <li>选项3</li>
        </ul>
    </div>
    
    <div id="content">
    	<div style="display:block;">aaaaaaaaaa</div>
        <div>bbbbbbbbbb</div>
        <div>cccccccccc</div>
    </div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('ul>li').click(function(){
	$(this).addClass('current').siblings().removeClass('current');
	$('#content>div').eq($(this).index()).show().siblings().hide();
	})	
</script>
</body>
</html>

　　

posted @ 2016-04-29 16:02  小虫1  阅读(222)  评论(0)    收藏  举报