07
2020
04

js实现tab选项卡切换

在我们平时浏览网站的时候,经常看到的特效有图片轮播、导航子菜单的隐藏、tab标签的切换等等。这段时间学习了JS后,开始要写出一些简单的特效。今天我也分享一个简单tab标签切换的例子。在做Tab标签切换时,首先是先写好整体框架。在这里,先将内容区的三个div分别隐藏。然后当鼠标放在tab标签上时,再执行相关操作,将div内容显示出来。

先附上代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        #div {
            width: 640px;
            height: 480px;
            border: 2px solid #cccccc;
            margin: 100px auto;
            position: relative;

        }
        #top {
            height: 45px;
        }
        #top span {
            display: inline-block;
            width: 156px;
            background-color: lightskyblue;
            line-height: 45px;
            text-align: center;
            cursor: pointer;
        }
        #top span.choose {
            background-color: deepskyblue;

        }
        #content li {
            display: none;
            position: absolute;
            top: 60px;
            left: 0;
        }
        #content li.choose {
            display: block;
        }
        #content li img{
        	
        	display: block;
        	width: 640px;
        	height: 420px;
        }
        body {
            background-image: url("img/bg.gif");
        }
    </style>
</head>
<body>
<div id="div">
    <div id="top">
        <span class="choose">新闻01</span>
        <span>新闻02</span>
        <span>新闻03</span>
        <span>新闻04</span>
    </div>

    <div id="content">
        <ul>
            <li class="choose"><img src="https://www.qiquanji.com/data/img/dmj/201904021554214156149153.jpg" alt=""/></li>
            <li><img src="https://www.qiquanji.com/data/img/dmj/201904021554214156110755.jpg" alt=""/></li>
            <li><img src="https://www.qiquanji.com/data/img/dmj/201904021554214156210514.jpg" alt=""/></li>
            <li><img src="https://www.qiquanji.com/data/img/dmj/201904021554214157190473.jpg" alt=""/></li>
        </ul>
    </div>
</div>
<script>

    //获取列表中的元素
    var spanO=document.getElementsByTagName("span");
    var liO=document.getElementsByTagName("li");
    //循环遍历每个span标签
    for(var i=0;i<spanO.length;i++) {
        //添加自定义属性,索引
        spanO[i].setAttribute("index",i);
        //注册点击事件,添加事件处理函数
        spanO[i].onclick=function() {
            //循环遍历每个span
            for(var j=0;j<spanO.length;j++) {
                //移除span的样式
                spanO[j].removeAttribute("class");
            }
            //给每个span赋予新样式
            this.className="choose";
            //循环遍历每个li
            for(var k=0;k<liO.length;k++) {
                //移除li的样式
                liO[k].removeAttribute("class");
            }
            liO[this.getAttribute("index")].className="choose";
        }
    }
</script>


</body>
</html>

原文链接:https://www.qiquanji.com/post/7166.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

gzh

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。