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>

  • 相关阅读:
    c# udp局域网通信
    wpf 空白汉字占位符
    直角三角形知道变长求夹角
    windowsphone 的IsolatedStorageSettings存储类型
    WPFUIElement的Background的问题
    oracle外表
    oracle安装
    数据库ddl,dml,dcl
    OLTP与OLAP的介绍
    四种XML解析方式详解
  • 原文地址:https://www.cnblogs.com/annie211/p/5846830.html
Copyright © 2011-2022 走看看