JQ超簡單多個選項卡

時間  2021-01-30
標籤 javascript css html java jquery ide this spa code htm 欄目 JavaScript 简体版
原文   原文鏈接 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--本身的css-->
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    <body>
    <style>
    /*必須設置的*/ .jsTab_con{ display:none;} .jsTab_title span{ cursor:pointer;} .jsTab_title .jsTab_this{ background:#096;}
    </style> !--第一個選項卡--> <div class="js_tab box1">

         <h2 class="jsTab_title"><span>標題11</span><span>標題12</span><span>標題13</span></h2>

    <div class="jsTab_con"> 內容11 </div>

    <div class="jsTab_con"> 內容12 </div>

    <div class="jsTab_con"> 內容13 </div>

</div>

 

<!--第二個選項卡-->

<div class="js_tab box2">

         <h2 class="jsTab_title"><span>標題21</span><span>標題22</span><span>標題23</span></h2>

    <div class="jsTab_con"> 內容21 </div>

    <div class="jsTab_con"> 內容22 </div>

    <div class="jsTab_con"> 內容23 </div>

</div>

    </body>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript"> $(document).ready(function(){ //使選項卡的第一項顯示，必須加入

         var tabs=$(".js_tab"); tabs.each(function(){ $(this).find(".jsTab_title span").first().addClass("jsTab_this"); $(this).find(".jsTab_con").first().show(); }); //調用，不能用自己的js_tab調用，需另起一個class或id
 $(".box1").js_tab(); $(".box2").js_tab(); }); (function($){ $.fn.extend({ "js_tab":function(){ $(this).find(".jsTab_title span").each(function(index){ $(this).click(function(){ $(this).siblings("span").removeClass("jsTab_this"); $(this).addClass("jsTab_this"); var tab_c=$(this).parents(".js_tab").find(".jsTab_con"); tab_c.hide(); tab_c.eq(index).show(); }); return $(this); }); } }); })(jQuery); </script>

</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程