web前端之用js控制导航栏与副导航栏的切换

最新推荐文章于 2024-06-30 14:04:39 发布

酒铺里的奶橘猫

最新推荐文章于 2024-06-30 14:04:39 发布

阅读量2.2k

点赞数

分类专栏：编程语言 web前端 web前端

本文链接：https://blog.csdn.net/qq_33559304/article/details/53344219

版权

web前端同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

编程语言 web前端

14 篇文章 0 订阅

订阅专栏

首先要具备js的基本知识：id、className、Tagname、name的获取和循环。

在点击图标中引用了font-Size;从图标库中获取代码。http://www.iconfont.cn/plus

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        header{
            position: relative;
            width: 100%;
            height: 388px;
            background: #D75900;
        }
          header div{
              position: absolute;
              top: 0px;
              left: 0px;
              right: 0px;
              bottom: 0px;
              margin: 0 auto;
              width: 1005px;
              height: 328px;
              opacity: 0;

          }
        .newDiv{
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            margin: 0 auto;
            width: 1005px;
            height: 328px;
            opacity: 1;
        }
        @font-face {font-family: "iconfont";
            src: url('font/iconfont.eot'); /* IE9*/
            src: url('font/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('font/iconfont.woff') format('woff'), /* chrome, firefox */
            url('font/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
            url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
        }

        .changeDiv{
            position: absolute;
            top: 328px;
            left: 0px;
            width: 1005px;
            height:80px;
            /*border: 1px red solid;*/
            margin-left: 190px;
        }
       .changeDiv div {
           text-align: center;
           line-height: 60px;
            width: 196px;
            height: 60px;
            float: left;
            font-family:"iconfont" !important;
            font-size:30px;
            font-style:normal;
            color: #CE3700;
            margin-left: 2px;
            background: rgba(255,255,255,.3);
           -webkit-transition: margin-top .05s linear;
           cursor: pointer;
        }
        .textDiv {
            text-align: center;
            line-height: 60px;
            width: 196px;
            float: left;
            font-family:"iconfont" !important;
            font-size:30px;
            font-style:normal;
            color: #CE3700;
            margin-left: 2px;
            background: rgba(255,255,255,.3);
            height: 60px;
            padding-top: 8px;
            margin-top: -8px;
            cursor: pointer;

        }


    </style>
</head>
<body>
<header>
    <!-- 5张轮播图-->
    <div class="first newDiv">
        <img src="images/index1.png">
    </div>
    <div>
        <img src="images/index2.png">
    </div>
    <div>
        <img src="images/index3.png">
    </div>
    <div>
        <img src="images/index4.png">
    </div>
    <div>
        <img src="images/index5.png">
    </div>
</header>
<!--从iconfont中获取的以字体形式的图片，可以图片可以像字体一样任性修改-->
<div class="changeDiv">
     <div class="textDiv"  οnclick="changeAppear(this,0)">&#xe635;</div>
     <div οnclick="changeAppear(this,1)">&#xe6f4;</div>
     <div οnclick="changeAppear(this,2)">&#xe6b0;</div>
     <div οnclick="changeAppear(this,3)">&#xe607;</div>
     <div οnclick="changeAppear(this,4)">&#xe608;</div>
</div>
<script>
    /**
     * @desc  导航栏与副导航栏之间的切换
     * @param obj
     * @param n
     */
               function  changeAppear(obj,n){
                   var prarent=obj.parentNode;
                   var textDiv= prarent.getElementsByTagName("div");
                  //    console.log(textDiv);
                   for(var i=0;i<textDiv.length;i++){
                       textDiv[i].className="";
                   }
                        obj.className="textDiv";
                   var header=document.getElementsByTagName("header");
                     var imgDiv=header[0].getElementsByTagName("div");
                    console.log(header);
                    console.log(imgDiv);
                    for(var j=0 ;j<imgDiv.length;j++){
                            imgDiv[j].className="";

                    }
                         imgDiv[n].className="first newDiv";

               }


</script>
</body>

</html>
效果展示：

酒铺里的奶橘猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端之用js控制导航栏与副导航栏的切换

首先要具备js的基本知识：id、className、Tagname、name的获取和循环。在点击图标中引用了font-Size;从图标库中获取代码。http://www.iconfont.cn/plushtml>html>head lang="en"> meta charset="UTF-8"> title>title> style> *{
复制链接

扫一扫

专栏目录