沉浸式阅读
Beta
转载

多功能选项卡切换效果

     订阅 JS相关     2019-02-25     671    0    0    0    2019-02-25
学习要点:效果图HTMLdiv id="box"div id="tab"ulli class="on"选项卡一/lili选项卡二/lili选项卡三/lili选项卡四/li/ul/divdiv id="content"div class="pic on"ulli class="on" style="background: url(http://www.jq22.com/img/cs/500


效果图


HTML


<div id="box">
    <div id="tab">
        <ul>
            <li class="on">选项卡一</li>
            <li>选项卡二</li>
            <li>选项卡三</li>
            <li>选项卡四</li>
        </ul>
    </div>
    <div id="content">
        <div class="pic on">
            <ul>
                <li class="on" style="background: url(http://www.jq22.com/img/cs/500x500-1.png);"></li>
                <li style="background: url(http://www.jq22.com/img/cs/500x500-2.png);"></li>
                <li style="background: url(http://www.jq22.com/img/cs/500x500-3.png);"></li>
                <li style="background: url(http://www.jq22.com/img/cs/500x500-4.png);"></li>
            </ul>
        </div>
        <div class="btn on">
            <ul>
                <li class="on">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>

        <div class="pic">
            <ul>
                <li class="on" style="background: url(http://www.jq22.com/img/cs/500x500-5.png);"></li>
                <li style="background: url(http://www.jq22.com/img/cs/500x500-6.png);"></li>
                <li style="background: url(http://www.jq22.com/img/cs/500x500-7.png);"></li>
                <li style="background: url(http://www.jq22.com/img/cs/500x500-8.png);"></li>
                <li style="background: url(http://www.jq22.com/img/cs/500x500-9.png);"></li>
            </ul>
        </div>
        <div class="btn">
            <ul>
                <li class="on">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>

        <div class="pic">
            <ul>
                <li class="on" style="background: url(http://www.jq22.com/img/cs/500x300-1.png);"></li>
                <li style="background: url(http://www.jq22.com/img/cs/500x300-2.png);"></li>
                <li style="background: url(http://www.jq22.com/img/cs/500x300-3.png);"></li>
                <li style="background: url(http://www.jq22.com/img/cs/500x300-4.png);"></li>
            </ul>
        </div>
        <div class="btn">
            <ul>
                <li class="on">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>

        <div class="pic">
            <ul>
                <li class="on" style="background: url(http://www.jq22.com/img/cs/500x300-5.png);"></li>
                <li style="background: url(http://www.jq22.com/img/cs/500x300-6.png);"></li>
                <li style="background: url(http://www.jq22.com/img/cs/500x300-7.png);"></li>
                <li style="background: url(http://www.jq22.com/img/cs/500x300-8.png);"></li>
                <li style="background: url(http://www.jq22.com/img/cs/500x300-9.png);"></li>
            </ul>
        </div>
        <div class="btn">
            <ul>
                <li class="on">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
    </div></div>

CSS


* {
	margin:0;
	padding:0;
	font-family:Microsoft YaHei,serif;
}
li {
	list-style:none;
}
#box {
	width:426px;
	height:104px;
	margin:50px auto;
}
#tab {
	width:100px;
	height:100%;
	float:left;
}
#tab ul li {
	width:100px;
	height:50px;
	margin-bottom:1px;
	background:#000;
	font-size:18px;
	text-align:center;
	line-height:50px;
	color:#fff;
	cursor:default;
}
#tab ul li.on {
	background:#f60;
}
#content {
	position:relative;
	width:326px;
	height:203px;
	float:right;
}
#content .pic {
	display:none;
}
#content .pic.on {
	display:block;
}
#content .pic ul li {
	display:none;
	width:100%;
	height:203px;
	cursor:default;
}
#content .pic ul li.on {
	display:block;
}
#content .btn {
	display:none;
	position:absolute;
	bottom:0;
	right:0;
	height:35px;
	width:100%;
	background:rgba(0,0,0,.5);
}
#content .btn.on {
	display:block;
}
#content .btn ul {
	float:right;
}
#content .btn ul li {
	float:left;
	width:35px;
	height:35px;
	background:#ddd;
	text-align:center;
	line-height:35px;
	margin-left:2px;
}
#content .btn ul li.on {
	background:#f60;
}

JS


var tabLi = document.querySelectorAll("#tab li"),
    pic = document.getElementsByClassName("pic"),
    btn = document.getElementsByClassName("btn"),
    index = 0;

for (var i = 0; i < tabLi.length; i++) {
    var picLi = pic[i].querySelectorAll("li"),
        btnLi = btn[i].querySelectorAll("li");
    (function(i) {
        tabLi[i].onmouseenter = function() {
            tabLi[index].className = '';
            pic[index].className = "pic";
            btn[index].className = "btn";
            index = i;
            tabLi[i].className = 'on';
            pic[i].className = "pic on";
            btn[i].className = "btn on";
        }
    })(i);

    (function(pLi, bLi) {
        var index = 0;
        for (var i = 0; i < bLi.length; i++) {
            (function(i) {
                bLi[i].onmouseenter = function() {
                    bLi[index].className = "";
                    pLi[index].className = "";
                    index = i;
                    bLi[i].className = "on";
                    pLi[i].className = "on";
                }
            }(i))
        }
    }(picLi, btnLi))
}

提示: jQuery调用版本:1.11.3

本文标题: 多功能选项卡切换效果

本文链接: https://www.mbkfw.com/course/643.html (转载时请注明来源链接)

本文说明: 有问题或投稿请发送至: 邮箱/kf@dtmuban.com    QQ/290948585

特别鸣谢: 如果您觉得本文对您有帮助,请给我们一个小小的赞,收藏本文更利于反复学习哦!

 
本文标签: #选项卡 #切换
destoon程序前端开发标签生成器

下班PC阅读不方便?

手机也可以随时学习开发

微信关注公众号“商企云服”
"模板开发网前端开发教学"
每日干货技术分享
 
0

圈友点评

文明上网理性发言,请遵守网络评论服务协议

小编推荐



色彩
×

《客户实名在线注册登记》售后一直都在!

关注

微信
关注

微信扫一扫
不同的环境体验

幸运大转盘,好礼等您拿

模板开发网公众号

模板开发网微信小程序

代授权

程序
授权

黑小二

联系
客服

很高兴为您服务
尊敬的用户,欢迎您咨询,我们为新用户准备了优惠好礼。咨询客服

联系客服:

在线QQ: 290948585

客服电话: 18605917465

E_mail邮箱: kf@dtmuban.com

微信公众号: 商企云服

微信小程序: 模板开发

QQ客服 微信客服DT授权代办 在线交谈 智能小云

工作时间:

周一至周五: 09:00 - 18:00

APP下载

安卓
APK

模板开发网安卓版APP

反馈

我要
反馈