网页选项卡

最新推荐文章于 2022-06-11 12:06:31 发布

砺雪凝霜

最新推荐文章于 2022-06-11 12:06:31 发布

阅读量58

点赞数

分类专栏： java基础文章标签：网页选项卡

本文链接：https://blog.csdn.net/haogangshang/article/details/88290949

版权

java基础专栏收录该内容

96 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>网页特效实用选项卡代码站长特效网</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script>

</script>
<style type="text/css">
.hide {
display: none;

}
.show {
display: block;
}
#tab_box {
width: 500px;
height: 24px;
margin-bottom: 7px;
}
#tab_menu ul {
margin: 0;
padding: 0;
}
#tab_menu ul li {
float: left;
list-style: none;
display: inline;
border: 1px solid #D1D1D1;
border-bottom: 0px;
margin: 0 10px;
white-space: nowrap;
text- overflow: ellipsis;
cursor: pointer;
width: 60px;
height: 24px;
text-align: center;
font-size: 14px;
overflow: visible;
}

#tab_menu ul li.selected {
border-top: 2px solid #D1D1D1;
border-right: 2px solid #D1D1D1;
border-left: 2px solid #D1D1D1;
color: #000000;
font-weight: bold;
border-bottom: 0px solid #D1D1D1;
}
</style>
<script>
$(function(){

var $div_li = $("#tab_menu").find("ul").children();
$div_li.click(function(){
$(this).addClass("selected")
.siblings().removeClass("selected");
var index = $div_li.index(this);
$("#tab_box").find("div").eq(index).show()
.siblings().hide();
});

});
</script>
</head>
<body>
<div id="main">
<div id="tab_menu">

<ul>
<li class="selected">站长特效</li>
<li>站长特效</li>
<li>站长特效</li>
<li>站长特效</li>
<li>站长特效</li>
<li>站长特效</li>
</ul>

</div>
<div id="tab_box">
<div class="show" ><p>打造国内最帅的网页特效站！1</p></div>
<div class="hide" ><p>打造国内最帅的网页特效站！2</p></div>
<div class="hide" ><p>打造国内最帅的网页特效站！3</p></div>
<div class="hide" ><p>打造国内最帅的网页特效站！4</p></div>
<div class="hide" ><p>打造国内最帅的网页特效站！5</p></div>
<div class="hide" ><p>打造国内最帅的网页特效站！6</p></div>
</div>
</div>
</body>
</html>

砺雪凝霜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页选项卡

}#tab_menu ul { margin: 0; padding: 0;}#tab_menu ul li { float: left; list-style: none; display: inline; border: 1px solid #D1D1D1; border-bottom: 0px; margin: 0 10px; white-space: nowrap; text- overflow: ellipsis; cursor: point
复制链接

扫一扫