js选项卡

作者 :
免费
  • 正文
  • 方法一:

    <li id=”tab1″ onClick=”show(1)” style=”background-color:green”>选项1</li>

    <li id=”tab2″ onClick=”show(2)”>选项2</li>

    <p id=”p1″>选项卡1的内容。。。</p>
    <p id=”p2″ style=”display:none”>选项卡2的内容。。。</p>

    <script>
    function show(n){
    for(var i=1;i<=2;i++){
    //先把所有的选项卡背景颜色设为橙色,内容都隐藏
    document.getElementById(“tab”+i).style.backgroundColor = ‘orange’;
    document.getElementById(“p”+i).style.display = ‘none’;
    }
    document.getElementById(“tab”+n).style.backgroundColor = ‘green’;
    document.getElementById(“p”+n).style.display = “block”;
    }
    </script>

    方法二:

    <strong id=”tab1″ onmouseover=”show(1)” style=”color:#C70100″>公司新闻</strong>

    <strong id=”tab2″ onmouseover=”show(2)” style=”color:#0056BB;font-weight:normal”>行业动态</strong>

    <p id=”p1″>选项卡1的内容。。。</p>
    <p id=”p2″ style=”display:none”>选项卡2的内容。。。</p>

    <script>
    function show(n){
    for(var i=1;i<=2;i++){
    //先把所有的选项卡颜色,内容都隐藏。
    var add = document.getElementById(“tab”+i);
    add.style.cssText = “color:#0056BB;font-weight:normal”;
    document.getElementById(“p”+i).style.display = ‘none’;
    }
    var ddd = document.getElementById(“tab”+n);
    ddd.style.cssText = “color:#C70100;font-weight:blod”;

    document.getElementById(“p”+n).style.display = “block”;
    }
    </script>

    注:方法一和方法二没有区别,但方法二可以多加几个CSS属性值。

    END
    如本资源侵犯了您的权益,请联系投诉邮箱admin@wmphp.com进行举报!我们将在收到邮件的1个小时内处理完毕。 本站仅为平台,发布的资源均为用户投稿或转载!所有资源仅供参考学习使用,请在下载后的24小时内删除,禁止商用! Wmphp.com(完美源码)助力正版,如您有自己的原创产品,可以联系客服投稿,代理出售! Wmphp.com(完美源码)客服QQ:136882447 Wmphp.com(完美源码)商务电话(仅对企业客户/个人用户):15120086569 (微信同步) 请注意:本站不提供任何免费的技术咨询服务,为了节约时间,下载前 请确认自己会技术
    完美源码 » js选项卡
    2420+

    本站勉强运行

    163+

    用户总数

    510+

    资源总数

    0+

    今日更新

    2021-5-14

    最后更新时间