zoukankan      html  css  js  c++  java
  • Div+CSS+JQuery实现选项卡,即通过点击不同的li跳转到不同的div中显示不同的内容或者执行不同的操作。

    1.代码

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.0.js"></script>
        <style type="text/css">
            body,div,ul{ padding:0; margin:0;}
            #container{width:800px; margin:50px;}
            .tab{ padding:0; margin:0;  }
            .tab li{ list-style:none; float:left;padding:0; margin-right:10px; line-height:30px; height:30px; width:65px; text-align:center;}
            .content{ float:none; padding-top:30px; border:solid 1px black; clear:both; }
            .content div{ border-top:0px; height:60px;}
            .tab_selected{ border-left:solid 1px black; background-color:#ffffff; border-right:solid 1px black; 
            border-top:solid 1px black; border-bottom:0px; bottom:-1px; position:relative; z-index:1}
            .tab_current{  text-decoration:underline;}
           </style>
           <script language="javascript" type="text/javascript">
               $(
                function() {
                    $(".content div:gt(0)").hide();
                    $(".tab li").css("cursor", "pointer");
                    $(".tab li").hover(function() {
                    $(this).addClass("tab_current");
                    }, function() {
                        $(this).removeClass("tab_current");
                    }).click(
                        function() {
                            $(this).addClass("tab_selected").siblings().removeClass("tab_selected");
                            $(".content div").eq($(this).index()).siblings().hide().end().show();
                        }
                    )
                }
               );
           </script>
      </head>
      
      <body>
        <div id="container">
           <div class="tab">
                <ul>
                    <li class="tab_selected">选项卡A</li>
                    <li>选项卡B</li>
                    <li>选项卡C</li>
                </ul>
           </div>
           <div class="content">
                <div>内容一</div>
                <div>内容二</div>
                <div>内容三</div>
           </div>
        </div>
      </body>
    </html>

    2.效果图:

    转载:https://blog.csdn.net/lyr1985/article/details/47018325

  • 相关阅读:
    【转载】【贪心】各种覆盖问题
    【转载】【知识点总结】NOIP前夕 2014.11.4
    最大子图形问题
    小知识
    Tyvj——P1864 [Poetize I]守卫者的挑战
    Tyvj——P1952 Easy
    BZOJ——2134: 单选错位
    BZOJ——1620: [Usaco2008 Nov]Time Management 时间管理
    BZOJ——1622: [Usaco2008 Open]Word Power 名字的能量
    洛谷 U3357 C2-走楼梯
  • 原文地址:https://www.cnblogs.com/wyhluckdog/p/10768137.html
Copyright © 2011-2022 走看看