用jquery写html切换效果，不能使用table标签，要求简单明了。样式像下面这个就好…………
2个回答
展开全部
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>tab</title>
<style>
html,body{margin:0;padding:0;width:100%;background:#ededed;}
#main{width:400px;height:288px;margin:200px auto;border:1px solid #ccc;padding-top:20px;}
#tab_header>span{display:inline-block;height:30px;line-height:30px;text-align:center;width:80px;cursor:pointer;}
#tab_header>span.selected{background:#ff00ff;color:#ffffff;}
#tab_body>ul{display:none;}
#tab_body>ul.shown{display:block;}
</style>
<script type="text/javascript" src="http://www.duowan.com/assets/js/jquery.js"></script>
</head>
<body>
<div id="main">
<div id="tab_header">
<span class="selected">tab1</span><span>tab2</span><span>tab3</span>
</div>
<div id="tab_body">
<ul class="shown">
<li>tab1 - 1</li>
</ul>
<ul>
<li>tab2 - 1</li>
<li>tab2 - 2</li>
</ul>
<ul>
<li>tab3 - 1</li>
<li>tab3 - 2</li>
<li>tab3 - 3</li>
</ul>
</div>
</div>
<script>
$('#tab_header').find('span').on('mouseover', function(){
$(this).addClass("selected").siblings().removeClass("selected");
$('#tab_body').find('ul').eq($(this).index()).addClass("shown").siblings().removeClass("shown");
});
</script>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
。。。可以做啊，但你要的只是切换效果，还是连同这个界面效果呢
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
