class实现导航条功能

最新推荐文章于 2020-11-25 21:34:02 发布

iteye_8986

最新推荐文章于 2020-11-25 21:34:02 发布

阅读量274

点赞数

分类专栏： javascript CSS 文章标签：导航条

本文链接：https://blog.csdn.net/iteye_8986/article/details/82447458

版权

javascript CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏


<style>
            .nav-tabs {
                height: 36px;
                margin-bottom: 3px;
            }

            .nav-tabs span {
                background-color: lightgray;
                padding: 8px;
                color: blue;
            }

            .nav-tabs .active {
                background-color: black;
                color: white;
            }

            .tab-content .show {
                margin-top: 6px;
                display: block;
            }

            .tab-content div {
                display: none;
            }
</style>
<script type="text/javascript">
      window.onload=function(){
          function selectActive(){
              var div=this.parentElement;
              var spans=div.getElementsByTagName("span");
              for(var i=0;i<spans.length;i++){
                  spans[i].className = '';
              }
                  this.className = 'active';

             var tabContent = div.getElementsByClassName('tab-content')[0];
             var divs = tabContent.children;
             for (var i = 0; i < divs.length; ++i) {
                   divs[i].className = '';
             }
             divs[this.index].className = 'show';
          }

             var tabs = document.getElementsByClassName('nav-tabs');
             for (var divIndex = 0; divIndex < tabs.length; ++divIndex) {
                 var spans = tabs[divIndex].getElementsByTagName('span');
                 for (var spanIndex = 0; spanIndex < spans.length; ++spanIndex) {
                      spans[spanIndex].index = spanIndex;
                      spans[spanIndex].onclick = selectActive;
                 }
             }     
       }
</script>
<body>
        <div class='nav-tabs'>
            <span class='active'>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>

            <div class='tab-content'>
                <div class='show'>这是第一个导航页面</div>
                <div>这是第二个导航页面</div>
                <div>这是第三个导航页面</div>
                <div>这是第四个导航页面</div>
            </div>
        </div>

        <div style='margin: 20px'></div>

        <div class='nav-tabs'>
            <span class='active'>0</span>
            <span>1</span>
            <span>2</span>
            <span>3</span>

            <div class='tab-content'>
                <div class='show'>这是第一个导航页面</div>
                <div>这是第二个导航页面</div>
                <div>这是第三个导航页面</div>
                <div>这是第四个导航页面</div>
            </div>
        </div>

iteye_8986

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
class实现导航条功能

[code="java"] .nav-tabs { height: 36px; margin-bottom: 3px; } .nav-tabs span { background-color: lightgray...
复制链接

扫一扫