选项卡

最新推荐文章于 2021-11-25 20:24:44 发布

路人葵

最新推荐文章于 2021-11-25 20:24:44 发布

阅读量184

点赞数

分类专栏：前端代码 javascript 文章标签： JavaScript 选项卡

本文链接：https://blog.csdn.net/weixin_41218855/article/details/90273335

版权

前端同时被 3 个专栏收录

36 篇文章 0 订阅

订阅专栏

代码

16 篇文章 0 订阅

订阅专栏

javascript

16 篇文章 0 订阅

订阅专栏

这是仿照京东写的选项卡，在很多网站也可以看见类似的界面，算是低配版的选项卡

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <link rel="stylesheet" href="index.css">
    <script src="index.js"></script>
</head>
<body>
    <div id="box">
        <ul id="menu">
            <li class="active">家用电器</li>
            <li>手机通讯</li>
            <li>电脑数码</li>
            <li>服饰家园</li>
            <li>食品百货</li>
            <li>图书影像</li>
        </ul>
        <div id="panel">
            <div class="panel active"><img src="images/1.jpg" alt="">
                <div class="title">家电月中购物盛典</div>
                <ul class="list">
                    <li>京品空调1元试用</li>
                    <li>京品空调1元试用</li>
                    <li>京品空调1元试用</li>
                    <li>京品空调1元试用</li>
                </ul>
            </div>
            <div class="panel"><img src="images/2.jpg" alt="">
                <div class="title">家电月中购物盛典</div>
                <ul class="list">
                    <li>京品空调1元试用</li>
                    <li>京品空调1元试用</li>
                    <li>京品空调1元试用</li>
                    <li>京品空调1元试用</li>
                </ul>
            </div>
            <div class="panel"><img src="images/3.jpg" alt="">
                <div class="title">家电月中购物盛典</div>
                <ul class="list">
                    <li>京品空调1元试用</li>
                    <li>京品空调1元试用</li>
                    <li>京品空调1元试用</li>
                    <li>京品空调1元试用</li>
                </ul>
            </div>
            <div class="panel"><img src="images/4.jpg" alt="">
                <div class="title">家电月中购物盛典</div>
                <ul class="list">
                    <li>京品空调1元试用</li>
                    <li>京品空调1元试用</li>
                    <li>京品空调1元试用</li>
                    <li>京品空调1元试用</li>
                </ul>
            </div>
            <div class="panel"><img src="images/5.jpg" alt="">
                <div class="title">家电月中购物盛典</div>
                <ul class="list">
                    <li>京品空调1元试用</li>
                    <li>京品空调1元试用</li>
                    <li>京品空调1元试用</li>
                    <li>京品空调1元试用</li>
                </ul>
            </div>
            <div class="panel"><img src="images/6.jpg" alt="">
                <div class="title">家电月中购物盛典</div>
                <ul class="list">
                    <li>京品空调1元试用</li>
                    <li>京品空调1元试用</li>
                    <li>京品空调1元试用</li>
                    <li>京品空调1元试用</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

css部分：

* {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
body {
    font-size: 12px;
}
#box {
    margin: 50px auto;
    width: 504px;
}
#menu {
    background-color: #eee;
    overflow: hidden;
}
#menu li {
    width: 82px;
    line-height: 28px;
    float: left;
    text-align: center;
    border: 1px solid #eee;
    border-bottom-color: #ccc;
    border-top-width: 2px;
    cursor: pointer;
}
#menu .active {
    border-left-color: #ccc;
    border-right-color: #ccc;
    background-color: #fff;
    border-top-color: blue;
    border-bottom-color: #fff;
}
#panel .panel {
    display: none;
    overflow: hidden;
    margin: 10px 0;
}
#panel .active {
    display: block;
}
#panel .panel img {
    float: left;
}
#panel .panel .title {
    margin-left: 265px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}
#panel .panel .list {
    margin-left: 264px;
}
#panel .panel .list li {
    float: left;
    width: 120px;
    line-height: 24px;
    text-decoration: underline;
}

JavaScript部分：

//通过ID获取DOM节点
function $(id){
    return document.getElementById(id);
}
//删除class名称
function removeclass(obj,sClass){
    //读取class
    var
        sClassName = obj.className,
        aClassName = sClassName.split(' '),
        aRemain = [];
    for(var i = 0;i <aClassName.length; i++){
        if(aClassName[i] !== sClass){
            aRemain.push(aClassName[i]);
        }
    }
    obj.className = aRemain.join('&emsp;');
}
//判断class是否含有class名称
function hasclass(obj,sClass){
    var aClassName = obj.className.split(' ');
    for(var i = 0;i < aClassName.length;i++){
        if(aClassName[i] === sClass){
            return true;
        }
    }
    return false;
}
//添加class名称
function addClass(obj,sClass){
    if(!hasclass(obj,sClass)){
        obj.className += ' '+ sClass;
    }
}
window.onload = function () {
    var
        oMenu = $('menu'),
        aLi = oMenu.children,
        oPaner = $('panel'),
        aPaner = oPaner.children;

    //给每个Li添加onclick事件
    for( var i = 0;i < aLi.length; i++){
        //添加index索引
        aLi[i].index = i;
        aLi[i].onclick = function () {
            if(!hasclass(this,'active')){
                for(var j = 0;j < aLi.length; j++){
                    //第一步去掉所有的Li的class名
                    aLi[j].className = '';
                    //让所有的.panel的display为none
                    removeclass(aPaner[j],'active');
                }
                this.className = 'active';

                //让对应的panel的display为block
                addClass(aPaner[this.index],'active');
            }
        }
    }
}

路人葵

关注

0
点赞
踩
1

收藏

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

这是仿照京东写的选项卡，在很多网站也可以看见类似的界面，算是低配版的选项卡html部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选项卡</title> <link rel="style...
复制链接

扫一扫

专栏目录