zoukankan      html  css  js  c++  java
  • 怎么用JavaScript实现tab切换

    先看一下代码实现后的最终效果:

    用JavaScript实现思路很简单,就是先把所有的内容隐藏,点击标题对应的内容显示,

    css代码如下:

    <style type="text/css">
                #ltab {
                    clear: both;
                    /*清除全部浮动样式*/
                }
                #ltab_1 {
                    display: none;
                }
                #ltab_2 {
                    display: none;
                }     
                #ltab_3 {
                    display: none;
                }

    </style>

    html内容区域:

    <body>

    /标题区域/

        <div class="home__tab___4BeRq">
                                        <ul>
                                            <li id="tabc_0" class="home__active___1gdd2" onclick="changeTab('0')">
                                                <span class="home__tab-text___2P3Ej">最新资讯</span><span class="home__line___12SrG"></span>
                                            </li>
                                            <li id="tabc_1"  onclick="changeTab('1')">
                                                <span class="home__tab-text___2P3Ej">牛人动态</span><span class="home__line___12SrG"></span>
                                            </li>
                                            <li id="tabc_2"  onclick="changeTab('2')">
                                                <span class="home__tab-text___2P3Ej">股神排行</span><span class="home__line___12SrG"></span>
                                            </li>
                                            <li id="tabc_3"  onclick="changeTab('3')">
                                                <span class="home__tab-text___2P3Ej">大师策略</span><span class="home__line___12SrG"></span>
                                            </li>
                                        </ul>

          </div>

    /内容区域/

    <div id="ltab">

        <div id="ltab_0">

            具体内容太繁琐,以简单文字代替

        </div>

        <div id="ltab_1">

        具体内容太繁琐,以简单文字代替

        </div>

        <div id="ltab_2">

        具体内容太繁琐,以简单文字代替

        </div>

       <div id="ltab_3">

         具体内容太繁琐,以简单文字代替

        </div>

    </div>

    </body>

    js代码如下:

    function changeTab(ltab_num) {
                    for(i = 0; i <= 3; i++) {
                        document.getElementById("tabc_" + i).className="" //隐藏所有的标题样式
                        document.getElementById("ltab_" + i).style.display = "none"; //将所有的层都隐藏
                        
                    }
                    document.getElementById("tabc_"+ltab_num).className="home__active___1gdd2";//令当前选中状态的标题的class=“home__active___1gdd2”
                    document.getElementById("ltab_" + ltab_num).style.display = "block"; //显示当前层
                }

     相关参考网址:

    http://www.jb51.net/article/74395.htm

  • 相关阅读:
    oc 阿拉伯数字转中文数字
    std::vector<char> 转 const char
    cocos2d-x类型转换(CCstring int string char UTF-8互转)
    js Array.prototype.join.call(arguments,",") 理解
    去除console.log
    This renderer process has Node.js integration enabled and attempted to load remote content from Electron的警告
    [vue/no-parsing-error] Parsing error: x-invalid-end-tag 提示报错
    node 调用cmd 乱码
    nodeIntegration: true Electron的警告
    take it away `electron-builder` Electron打包失败的问题
  • 原文地址:https://www.cnblogs.com/lyyguniang/p/7813105.html
Copyright © 2011-2022 走看看