zoukankan      html  css  js  c++  java
  • jquery制作选项卡

    思路:点击按钮后,先让所有的按钮的class属性都为“”,所有的div的display样式都为none;再让当前被点击按钮的class属性为active,以及所对应的div的display样式为block。
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <style>
    #nav button{200px;height:50px;}
    #nav .active{background:yellow;}
    .news{600px;height:600px;}
    .a{display:block;background:pink;}
    .b{display:none;background:blue;}
    .c{display:none;background:green;}
    </style>
    <title>jquery制作选项卡</title>
    <script src="jquery.min.js"></script>
    <script>
    $(function(){
      $("#nav").find("button").click(function(){
        $("#nav").find("button").attr("class","");
        $("#news").find(".news").css("display","none");

        $(this).attr("class","active");
        $("#news").find(".news").eq($(this).index()).css("display","block");
      });
    });
    </script>
    </head>
    <body>
    <div id="nav">
    <button class="active">新闻动态</button>
    <button>专题制作</button>
    <button>图片欣赏</button>
    </div>
    <div id="news">
    <div class="news a">aaa</div>
    <div class="news b">bbb</div>
    <div class="news c">ccc</div>
    </div>
    </body>
    </html>

  • 相关阅读:
    「JXOI2018」游戏
    「CTSC2018」假面
    CodeForces
    CodeForces
    [Lydsy1710月赛] 小B的数字
    OpenJ_Bailian
    [SDOI2010] 地精部落
    CodeForces
    CodeForces
    [NOI2009] 管道取珠
  • 原文地址:https://www.cnblogs.com/annie211/p/5846830.html
Copyright © 2011-2022 走看看