21天好习惯第一期-10

最新推荐文章于 2023-06-04 23:22:07 发布

黎大学问

最新推荐文章于 2023-06-04 23:22:07 发布

阅读量43

点赞数

分类专栏： web 文章标签： tv

本文链接：https://blog.csdn.net/qq_52048801/article/details/121259588

版权

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JS实现滑动选项卡切换
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
.tv {
  clear: both;
  width: 998px;
  border: #c6c6c6 solid 1px;
  border-top: white;
}
.tv #tab .box1 {
  width: 100%;
  height: 35px;
  margin-top: 0px;
  border-bottom: red solid 2px;
}
.tv #tab .box1 .off,
.tv #tab .box1 .on {
  float: left;
  height: 35px;
  line-height: 35px;
  width: 155px;
  text-align: center;
  background: #c90506;
  color: #ffffff;
  position: relative;
  top: 0px;
  left: 0px;
}
.tv #tab .box1 .off i,
.tv #tab .box1 .on i {
  position: absolute;
  left: 0px;
  top: 5px;
  height: 30px;
  line-height: 25px;
  text-align: center;
  width: 35px;
  font-size: 20px;
}
.tv #tab .box1 .on,
.tv #tab .box1 .off {
  border-left: black 1px solid;
}
.tv #tab .box1 .on {
  background-color: #f14a4a;
}
.tv #tab li {
  list-style: none;
  text-align: center;
  width: 160px;
  height: 160px;
  float: left;
  cursor: pointer;
}
.tv #tab li:hover {
  opacity: 0.7;
}
.tv #tab li img {
  width: 130px;
  height: 120px;
  padding: 5px 10px 10px;
}
.tv #tab li p {
  font-size: 14px;
  color: #575757;
  font-family: '微软雅黑';
}
.tv #tab li p a {
  color: red;
}
.tv #tab li p a:hover {
  color: chocolate;
}
.tv #tab .hide {
  display: none;
}
.tv #tab #firstPage {
  height: 160px;
}
.tv #tab #secondPage {
  height: 160px;
}
    </style>
</head>
<body>
    <div class="tv">
    <div id="tab">
        <!-- 栏目标题 -->
        <ul class="box1">
            <li class="off"></i>aaaaaa</li>
            <li class="on"></i>bbbbbb</li>
        </ul>
        <!-- 视频展示 -->
        <div id="firstPage" class="hide">
                <li>
                    <img src="" alt="">
                    <p><a href="#">1</a> </p>
                </li>
                <li>
                    <img src="" alt="">
                    <p><a href="#">1</a> </p>
                </li>
                <li>
                    <img src="" alt="">
                    <p><a href="#">1</a> </p>
                </li>
                <li>
                    <img src="" alt="">
                    <p><a href="#">1</a> </p>
                </li>
                <li>
                    <img src="" alt="">
                    <p><a href="#">1</a> </p>
                </li>
                <li>
                    <img src="" alt="">
                    <p><a href="#">1</a> </p>
                </li>
            </ul>
        </div>
        <div id="secondPage" class="show">
                <!-- 视频展示 -->
                <ul class="tv-list">
                    <li>
                        <img src="" alt="">
                        <p><a href="#">2</a> </p>
                    </li>
                    <li>
                        <img src="" alt="">
                        <p><a href="#">2</a> </p>
                    </li>
                    <li>
                        <img src="" alt="">
                        <p><a href="#">2</a> </p>
                    </li>
                    <li>
                        <img src="" alt="">
                        <p><a href="#">2</a> </p>
                    </li>
                    <li>
                        <img src="" alt="">
                        <p><a href="#">2</a> </p>
                    </li>
                </ul>
        </div>
    </div>
</div>
    <script type="text/javascript">
        // JS实现选项卡切换
        window.onload = function(){
        var myTab = document.getElementById("tab");
        var myUl = myTab.getElementsByTagName("ul")[0];
        var myLi = myUl.getElementsByTagName("li");
        var myDiv = myTab.getElementsByTagName("div"); 
    
        for(var i = 0; i<myLi.length;i++){
            myLi[i].index = i;
            myLi[i].onmousemove = function(){
                for(var j = 0; j < myLi.length; j++){
                    myLi[j].className="off";
                    myDiv[j].className = "hide";
                }
                this.className = "on";
                myDiv[this.index].className = "show";
            }
          }
        }
        </script>
</body>
</html>

黎大学问

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
21天好习惯第一期-10

JS实现滑动选项卡切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
复制链接

扫一扫