选项卡（1）

最新推荐文章于 2024-11-07 13:38:59 发布

diemengxia1380

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量130

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/flyingLcode/p/7765367.html

版权

选项卡控件它提供一系列操作按钮，单击不同的按钮可以在各个页面之间进行切换。

选项卡实现的几种方法：

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>