html网页设计div+css下图的效果怎么做?
发布网友
发布时间：2022-04-26 10:39
共3个回答
热心网友
时间：2022-04-20 12:19
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/lib/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../js/lib/jquery-migrate-1.2.1.min.js"></script>
<title>jquery选项卡</title>
<style type="text/css">
ul,li{margin:0;padding:0;list-style:none;}
a{outline:none;}
#tabWrap{width:401px;margin:0 auto;overflow:hidden;}
.tabTitle{width:400px;border-right:1px solid #50afae;overflow:hidden;}
.tabTitle li{float:left;width:99px;text-align:center;padding:5px 0;
border:1px solid #50afae;border-right:none;cursor:pointer;}
.tabTitle li.active{background:#009ccf;border-color:#009ccf;}
.tabTitle a{text-decoration:none;}
.tabTitle .active a{color:#fff;text-decoration:none;}
.tabCon{width:399px;overflow:hidden;border:1px solid #009ccf;border-top:none;}
.tabCon li{overflow:hidden;padding:5px;display:none;}
</style>
<script type="text/javascript">
$(function(){
$("#tabWrap .tabTitle li").each(function(i,obj){
$(obj).unbind('click').click(function(){
$("#tabWrap .tabTitle li").each(function(){
if($(this).hasClass('active')){
$(this).removeClass('active');
}
});
$("#tabWrap .tabCon li").each(function(){
$(this).hide();
});
$(obj).addClass('active');
$("#tabWrap .tabCon li").eq(i).show();
});
});
})
</script>
</head>
<body>
<div id="tabWrap">
<ul class="tabTitle">
<li class="active"><a href="###">tab1</a></li>
<li><a href="###">tab2</a></li>
<li><a href="###">tab3</a></li>
<li><a href="###">tab4</a></li>
</ul>
<ul class="tabCon">
<li style="display:block;">tab1内容</li>
<li>tab2内容</li>
<li>tab3内容</li>
<li>tab4内容</li>
</ul>
</div>
</body>
</html>
这个是我写的一个选项卡的小例子，里面具体的样式你可以自己修改，查看效果注意需要重新引用一下你本地的jquery
热心网友
时间：2022-04-20 13:37
然后会看到很多
打开学习学习就可以了
（懒人tuku 里面有 免费的代码）
----------满意望采纳-------------
热心网友
时间：2022-04-20 15:12
