选项卡控件它提供一系列操作按钮，单击不同的按钮可以在各个页面之间进行切换。
选项卡实现的几种方法：
html+css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
list-style:none;
box-sizing:border-box;
}
body{
padding:20px;
}
.tabs{
width:650px;
position:relative;
background:#aaf;
}
.tabs li{
float:left;
}
.tabs input[type=radio]{/*隐藏单选框的样式*/
position:absolute;
top:-9999px;
left:-9999px;
}
.tabs label{
display:block;
border:1px solid #000;
padding:10px;
text-align:center;
border-radius:6px 6px 0 0 ;
background:#aaf;
border-bottom:1px solid transparent;
position:relative;
top:4px;
z-index:3;
transition:all 0.2s ease-in-out;
}
.tabs label:hover{
background:#bbf;
}
.tabs .tab_content{
width:100%;
background:#faf;
height:200px;
position:absolute;
top:43px;
left:0px;
z-index:2;
border:1px solid #000;
padding:10px;
display:none;
}
.tabs input[type=radio]:checked + label{
top:0px;
padding-top:14px;
background:#faf;
}
.tabs input[type=radio]:checked ~ div[id^=tab_content]{
display:block;
}
</style>
</head>
<body>
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab1" checked/>
<label for="tab1">选择卡1</label>
<div class="tab_content" id="tab_content1">
<p>选项卡1的内容</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab2"/>
<label for="tab2">选择卡2</label>
<div class="tab_content" id="tab_content2">
<p>选项卡2的内容</p>
</div>
</li>
</ul>
</body>
</html>
html+css+js实现切换效果
基本思路：首先编写HTML，然后再加载样式，最后用JS修改相应的DOM，达到更改选项卡和内容的目的。
HTML页面布局
HTML显示的是所有与文字有关的信息，所以在这个页面中与文字有关的信息为上面选项卡的三个标题，以及选项卡的内容。
于是决定标题使用<ul> <li>布局，内容使用<div>布局。
CSS样式
要制作成上图所示的选项卡样式，几个地方需要注意：
1、整个选项卡的样式设置
2、选项卡标题的样式设置
3、选项卡内容的样式设置
4、只能显示一个选项卡的内容，其他选项卡内容隐藏。
JavaScript实现选项卡切换
1、需要获取选项卡标题和选项卡内容
2、选项卡内容有三个，需要循环遍历来操作，得知哪个选项卡和哪个选项内容匹配。
3、通过改变DOM的css类名称,当前点击的选项卡显示，其它隐藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab切换</title>
<style>
*{
padding: 0px;
margin: 0px;
}
body{
margin: 80px;
}
ul{
list-style: none;
}
#tab{
border: 1px solid #dddddd;
width: 498px;
height: 130px;
}
#tab-header{
height: 38px;
background-color: #f7f7f7;
position: relative;
}
.tab-header ul{
width: 501px;
position: absolute;
left: -1px;
}
.tab-header ul li{
float: left;
width: 98px;
height: 38px;
line-height: 38px;
text-align: center;
padding: 0px 1px;
border-bottom: 1px solid #dddddd;
}
#tab-header ul li.selected{
background-color: white;
border-bottom: 0px;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
padding: 0px;
}
.tab-header ul li:hover{
font-weight: bold;
color: orangered;
}
#tab-content ul{
margin-top: 10px;
}
a{
color: black;
text-decoration: none;
}
#tab-content li{
float: left;
width: 220px;
margin: 10px;
}
#tab-content a:hover{
color: orangered;
}
#tab-content .dom{
display: none;
}
</style>
</head>
<body>
<div id="tab">
<div id="tab-header" class="tab-header">
<ul>
<li class="selected">公告</li>
<li>规则</li>
<li>论坛</li>
<li>安全</li>
<li>公益</li>
</ul>
</div>
<div id="tab-content">
<div class="dom" style="display: block;">
<ul>
<li>
<a href="#">数据七夕:金牛爱送玫瑰</a>
</li>
<li>
<a href="#">阿里打造"互联网监管"</a>
</li>
<li>
<a href="#">10万家店60万新品</a>
</li>
<li>
<a href="#">全球最大网上时装周</a>
</li>
</ul>
</div>
<div class="dom">
<ul>
<li>
<a href="#">“全额返现”要管控啦</a>
</li>
<li>
<a href="#">淘宝新规发布汇总(7月)</a>
</li>
<li>
<a href="#">炒信规则调整意见反馈</a>
</li>
<li>
<a href="#">质量相关规则近期变更</a>
</li>
</ul>
</div>
<div class="dom">
<ul>
<li>
<a href="#">阿里建商家全链路服务</a>
</li>
<li>
<a href="#">个性化的消费时代来临</a>
</li>
<li>
<a href="#">跨境贸易是中小企业机</a>
</li>
<li>
<a href="#">美妆行业虚假信息管控</a>
</li>
</ul>
</div>
<div class="dom">
<ul>
<li>
<a href="#">接次文件，毁了一家店</a>
</li>
<li>
<a href="#">账号安全神器阿里钱盾</a>
</li>
<li>
<a href="#">新版阿里110上线了</a>
</li>
<li>
<a href="#">卖家学违禁避免被处罚</a>
</li>
</ul>
</div>
<div class="dom">
<ul>
<li>
<a href="#">为了公益high起来</a>
</li>
<li>
<a href="#">魔豆妈妈在线申请</a>
</li>
</ul>
</div>
</div>
</div>
<script>
function $(id) {
return typeof id === ‘string‘ ? document.getElementById(id) : id;
}
window.onload = function () {
var lis = $(‘tab-header‘).getElementsByTagName(‘li‘);
var content = $(‘tab-content‘).getElementsByClassName(‘dom‘);
if (lis.length != content.length) return;
for (var i = 0; i < lis.length; i++){
var li = lis[i];
li.id = i;
li.onmousemove = function () {
for (var j = 0; j < lis.length; j++){
lis[j].className = ‘‘;
content[j].style.display = ‘none‘;
}
this.className = ‘selected‘;
content[this.id].style.display = ‘block‘;
}
}
}
</script>
</body>
</html>
时间： 2024-10-14 06:18:45