<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.nav_tab{width: 50%;margin: 0 auto;overflow: hidden;}
.nav_tab li{height: 40px;background: #ccc;float: left;list-style: none;margin:10px 1% 0 1%;text-align: center;line-height: 40px;border-radius: 5%;}
.nav_tab li:first-child{background:#fbaa8a;}
.nr li:first-child{display: block;}
.nr{width: 48%;margin: 0 auto;margin-top: 50px;overflow: hidden;}
.nr li{width: 100%;height: 300px;line-height: 300px;background:#ccc;float: left;text-align: center;list-style: none;display: none;}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.nav_tab').on('click','li',function(){
$(this).css('background','#fbaa8a').siblings().css('background','#CCCCCC')
var int=$(this).index();
$('.nr li').eq(int).css('display','block').siblings().css('display','none')
})
var geshu=$('.nav_tab li').length;
if(geshu==1){$('.nav_tab li').css({width:'100%'})}
if(geshu==2){$('.nav_tab li').css({width:'48%'})}
if(geshu==3){$('.nav_tab li').css({width:'31.3%'})}
if(geshu>=4){$('.nav_tab li').css({width:'23%'})}
})
</script>
</head>
<body>
<ul class="nav_tab">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
<ul class="nr">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li>内容5</li>
<li>内容6</li>
<li>内容7</li>
<li>内容8</li>
<li>内容9</li>
<li>内容10</li>
<li>内容11</li>
<li>内容12</li>
<li>内容13</li>
</ul>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
