jQuery效果之tab选项卡及jQuery插件开发

最新推荐文章于 2022-08-02 15:55:50 发布

恒奇恒毅

最新推荐文章于 2022-08-02 15:55:50 发布

阅读量1.5k

点赞数

分类专栏：网页开发

网页开发专栏收录该内容

94 篇文章 1 订阅

订阅专栏

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JQuery实例-标签页效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="css/base.css" />
<link type="text/css" rel="stylesheet" href="css/tab.css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/HDtabs.js"></script>
<script type="text/javascript">
   $(function(){
       $('#tab').HDtabs();
   })

</script>
</head>
<body>
   <div id="tab" class="tab">
       <ul>
           <li>标签1</li>
           <li class="tabin">标签2</li>
           <li>标签3</li>
       </ul>
       <div class="content">
           <div class="contentin">我是内容1</div>
           <div>我是内容2</div>
           <div>我是内容3</div>
       </div>
   </div>

</body>
</html>

CSS

.tab ul li {
float: left;
background-color: #868686;
color: white;
padding: 5px;
margin-right: 2px;
border: 1px solid white;
cursor:pointer;
}
.tab ul li.tabin {
background-color: #6E6E6E;
border: 1px solid #6E6E6E;
}
.tab div.content {
clear: left;
background-color: #6E6E6E;
color: white;
width: 300px;
height: 100px;
padding: 10px;
}
.tab div.content div{
display: none;
}

.tab div.content .contentin {
display: block;
}