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

  • 相关阅读:
    Ⅲ:作业
    Ⅱ:python入门
    Auth模块
    django中间件
    Django的cookie以及session
    form组件
    Django Ajax
    Django模板层3和ajax初始
    聚合/分组 查询 事务
    Django ORM常用模块
  • 原文地址:https://www.cnblogs.com/wyhluckdog/p/10768137.html
Copyright © 2011-2022 走看看