Tab selection in bootstrap nav-tab

huangapple
go评论90阅读模式
英文:

Tab selection in bootstrap nav-tab

问题

I am using WordPress and want to use nav-tab in the Bootstrap library.

The default nav-tab mode of the Bootstrap library is very simple, so I want to improve it with a little script code.

I want the first tab to be active when the page is loaded and its background to be different from the rest of the tabs. But when another tab is clicked, the new tab will be activated and its background will change, and the first tab will take the default background and become inactive.

I wrote a separate script for each tab, which is very bad, and worse, this code does not work at all. That is, by clicking on each tab instead of the background (li); The background (ul) changes.

英文:

I am using wordpress and want to use nav-tab in bootstrap library.

The default nav-tab mode of the Bootstrap library is very simple, so I want to improve it with a little script code.

I want the first tab to be active when the page is loaded and its background to be different from the rest of the tabs. But when another tab is clicked, the new tab will be activated and its background will change, and the first tab will take the default background and become inactive.

I wrote a separate script for each tab, which is very bad, and worse, this code does not work at all. That is, by clicking on each tab instead of the background (li); The background (ul) changes.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1.        $(&#39;.nav_main&#39;).find(&#39;li.content-desc&#39;).click(function () {
  2.             if ($(this).parent().find(&quot;ul&quot;).eq(0).is(&#39;:visible&#39;)) {
  3.                 $(this).parent().removeClass(&#39;active&#39;);
  4.             } else {
  5.                 $(this).parent().addClass(&#39;active&#39;);
  6.             }
  7.         });
  9.         $(&#39;.nav_main&#39;).find(&#39;li.content-author&#39;).click(function () {
  10.             if ($(this).parent().find(&quot;ul&quot;).eq(0).is(&#39;:visible&#39;)) {
  11.                 $(this).parent().removeClass(&#39;active&#39;);
  12.             } else {
  13.                 $(this).parent().addClass(&#39;active&#39;);
  14.             }
  15.         });
  17.         $(&#39;.nav_main&#39;).find(&#39;li.content-comment&#39;).click(function () {
  18.             if ($(this).parent().find(&quot;ul&quot;).eq(0).is(&#39;:visible&#39;)) {
  19.                 $(this).parent().removeClass(&#39;active&#39;);
  20.             } else {
  21.                 $(this).parent().addClass(&#39;active&#39;);
  22.             }
  23.         });
  25.         $(&#39;.nav_main&#39;).find(&#39;li.content-tag&#39;).click(function () {
  26.             if ($(this).parent().find(&quot;ul&quot;).eq(0).is(&#39;:visible&#39;)) {
  27.                 $(this).parent().removeClass(&#39;active&#39;);
  28.             } else {
  29.                 $(this).parent().addClass(&#39;active&#39;);
  30.             }
  31.         });

<!-- language: lang-css -->

  1. .content_main {
  2.     width: 650px;
  3.     border: 1px solid #00000033;
  4.     text-align: justify;
  5.     margin: 0px 5px 10px 5px;
  6.     padding: 20px;
  7.     border-radius: 5px;
  8.     line-height: 35px;
  9. }
  11. .nav_main ul.active {
  12.     background: #b421f3;
  13. }
  15. .content-tab {
  16.     border: none;
  17. }
  19. .nav-tabs&gt;li&gt;a {
  20.     background: #e2e2e2;
  21.     border: 1px solid #00000033;
  22.     box-shadow: 0 -2px 0 #2196f3;
  23.     padding: 14px;
  24.     color: #000;
  25.     margin: 0px 15px 0px 5px;
  26.     border-radius: 5px 5px 0 0;
  27. }
  29. .content-tab {
  30.     margin-top: 20px;
  31. }
  33. .content-tab a:hover {
  34.     text-decoration: none;
  35. }
  37. .content-comment {
  38.     margin-right: -10px;
  39. }

<!-- language: lang-html -->

  1. &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;/&gt;
  2. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  6. &lt;div class=&quot;container&quot;&gt;
  7.         &lt;div class=&quot;nav_main&quot;&gt;
  8.             &lt;!-- Nav tabs --&gt;
  9.             &lt;ul class=&quot;nav nav-tabs content-tab&quot; role=&quot;tablist&quot;&gt;
  10.                 &lt;li role=&quot;presentation&quot; class=&quot;content-desc&quot;&gt;&lt;a class=&quot;desc&quot; href=&quot;#desc&quot; aria-controls=&quot;desc&quot;
  11.                         role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;content&lt;/a&gt;&lt;/li&gt;
  12.                 &lt;li role=&quot;presentation&quot; class=&quot;content-author&quot;&gt;&lt;a class=&quot;author&quot; href=&quot;#author&quot; aria-controls=&quot;author&quot;
  13.                         role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;author&lt;/a&gt;&lt;/li&gt;
  14.                 &lt;li role=&quot;presentation&quot; class=&quot;content-comment&quot;&gt;&lt;a class=&quot;comment&quot; href=&quot;#comment&quot;
  15.                         aria-controls=&quot;comment&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;comment&lt;/a&gt;&lt;/li&gt;
  16.                 &lt;li role=&quot;presentation&quot; class=&quot;content-tag&quot;&gt;&lt;a class=&quot;tag&quot; href=&quot;#tag&quot; aria-controls=&quot;tag&quot; role=&quot;tab&quot;
  17.                         data-toggle=&quot;tab&quot;&gt;tag&lt;/a&gt;&lt;/li&gt;
  18.             &lt;/ul&gt;
  19.             &lt;!-- Tab panes --&gt;
  20.             &lt;div class=&quot;tab-content content_main&quot;&gt;
  21.                 &lt;div role=&quot;tabpanel&quot; class=&quot;tab-pane active&quot; id=&quot;desc&quot;&gt;
  22.                     desc desc desc desc desc desc desc
  23.                 &lt;/div&gt;
  24.                 &lt;div role=&quot;tabpanel&quot; class=&quot;tab-pane&quot; id=&quot;author&quot;&gt;
  25.                     author author author author author
  26.                 &lt;/div&gt;
  27.                 &lt;div role=&quot;tabpanel&quot; class=&quot;tab-pane&quot; id=&quot;comment&quot;&gt;
  28.                     comment comment comment comment comment comment
  29.                 &lt;/div&gt;
  30.                 &lt;div role=&quot;tabpanel&quot; class=&quot;tab-pane&quot; id=&quot;tag&quot;&gt;
  31.                     tag tag tag tag tag tag
  32.                 &lt;/div&gt;
  33.             &lt;/div&gt;
  34.         &lt;/div&gt;
  36.     &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

以下是代码部分的翻译：

Demo Code :

  1. $("#myTab li > a").click(function(e) {
  2.   e.preventDefault();
  3.   $("#myTab li > a ,.tab-pane").removeClass("active");
  4.   $(this).addClass("active");
  5.   $(".tab-pane").hide(); // 隐藏其他选项卡
  6.   $(".tab-content " + $(this).attr("href")).addClass("active").show(); // 显示当前选项卡
  7. });
  9. $('#myTab > li:eq(0) a').click(); // 触发点击第一个选项卡
  1. .content_main {
  2.   width: 650px;
  3.   border: 1px solid #00000033;
  4.   text-align: justify;
  5.   margin: 0px 5px 10px 5px;
  6.   padding: 20px;
  7.   border-radius: 5px;
  8.   line-height: 35px;
  9. }
  11. .nav_main .active {
  12.   background: #b421f3;
  13. }
  15. .content-tab {
  16.   border: none;
  17. }
  19. .nav-tabs>li>a {
  20.   background: #e2e2e2;
  21.   border: 1px solid #00000033;
  22.   box-shadow: 0 -2px 0 #2196f3;
  23.   padding: 14px;
  24.   color: #000;
  25.   margin: 0px 15px 0px 5px;
  26.   border-radius: 5px 5px 0 0;
  27. }
  29. .content-tab {
  30.   margin-top: 20px;
  31. }
  33. .content-tab a:hover {
  34.   text-decoration: none;
  35. }
  37. .content-comment {
  38.   margin-right: -10px;
  39. }
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  2. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  4. <div class="container">
  5.   <div class="nav_main">
  6.     <!-- 导航选项卡 -->
  7.     <ul class="nav nav-tabs content-tab" role="tablist" id="myTab">
  8.       <li role="presentation" class="content-desc"><a class="desc active" href="#desc" aria-controls="desc" role="tab" data-toggle="tab">内容</a></li>
  9.       <li role="presentation" class="content-author"><a class="author" href="#author" aria-controls="author" role="tab" data-toggle="tab">作者</a></li>
  10.       <li role="presentation" class="content-comment"><a class="comment" href="#comment" aria-controls="comment" role="tab" data-toggle="tab">评论</a></li>
  11.       <li role="presentation" class="content-tag"><a class="tag" href="#tag" aria-controls="tag" role="tab" data-toggle="tab">标签</a></li>
  12.     </ul>
  13.     <!-- 选项卡内容 -->
  14.     <div class="tab-content content_main">
  15.       <div role="tabpanel" class="tab-pane active" id="desc">
  16.         描述 描述 描述 描述 描述 描述 描述
  17.       </div>
  18.       <div role="tabpanel" class="tab-pane" id="author">
  19.         作者 作者 作者 作者 作者
  20.       </div>
  21.       <div role="tabpanel" class="tab-pane" id="comment">
  22.         评论 评论 评论 评论 评论 评论
  23.       </div>
  24.       <div role="tabpanel" class="tab-pane" id="tag">
  25.         标签 标签 标签 标签 标签
  26.       </div>
  27.     </div>
  28.   </div>
  29. </div>

另一种方法是：

Demo Code :

  1. const triggerTabList = document.querySelectorAll('#myTab a');
  2. triggerTabList.forEach(triggerEl => {
  3.   const tabTrigger = new bootstrap.Tab(triggerEl);
  5.   triggerEl.addEventListener('click', event => {
  6.     event.preventDefault();
  7.     tabTrigger.show();
  8.   });
  9. });
  11. document.querySelector('#myTab > li:first-child a').click();
  1. .content_main {
  2.   width: 650px;
  3.   border: 1px solid #00000033;
  4.   text-align: justify;
  5.   margin: 0px 5px 10px 5px;
  6.   padding: 20px;
  7.   border-radius: 5px;
  8.   line-height: 35px;
  9. }
  11. .nav_main .active {
  12.   background: #b421f3;
  13. }
  15. .content-tab {
  16.   border: none;
  17. }
  19. .nav-tabs>li>a {
  20.   background: #e2e2e2;
  21.   border: 1px solid #00000033;
  22.   box-shadow: 0 -2px 0 #2196f3;
  23.   padding: 14px;
  24.   color: #000;
  25.   margin: 0px 15px 0px 5px;
  26.   border-radius: 5px 5px 0 0;
  27. }
  29. .content-tab {
  30.   margin-top: 20px;
  31. }
  33. .content-tab a:hover {
  34.   text-decoration: none;
  35. }
  37. .content-comment {
  38.   margin-right: -10px;
  39. }
  1. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  2. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous">
  4. <div class="container">
  5.   <div class="nav_main">
  6.     <!-- 导航选项卡 -->
  7.     <ul class="nav nav-tabs content-tab" role="tablist" id="myTab">
  8.       <li role="presentation" class="content-desc"><a class="desc" href="#desc" aria-controls="desc" role="tab" data-toggle="tab">内容</a></li>
  9.       <li role="presentation" class="content-author"><a class="author" href="#author" aria-controls="author" role="tab" data-toggle="tab">作者</a></li>
  10.       <li role="presentation" class="content-comment"><a class="comment" href="#comment" aria-controls="comment" role="tab" data-toggle="tab">评论</a></li>
  11.       <li role="presentation" class="content-tag"><a class="tag" href="#tag" aria-controls="tag" role="tab"
  13. <details>
  14. <summary>英文:</summary>
  16. You can keep only one click event for all tabs and inside that using `$(this)` and `id` show or hide your tabs.
  18. ***Demo Code :***
  20. &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
  22. &lt;!-- language: lang-js --&gt;
  24.     $(&quot;#myTab li &gt; a &quot;).click(function(e) {
  25.       e.preventDefault();
  26.       $(&quot;#myTab li &gt; a ,.tab-pane&quot;).removeClass(&quot;active&quot;);
  27.       $(this).addClass(&quot;active&quot;)
  28.       $(&quot;.tab-pane&quot;).hide() //hide all other tabs
  29.       $(&quot;.tab-content &quot; + $(this).attr(&quot;href&quot;)).addClass(&quot;active&quot;).show(); //show curent 
  30.     })
  32.     $(&#39;#myTab &gt; li:eq(0) a&#39;).click() // trigger click on first a
  34. &lt;!-- language: lang-css --&gt;
  36.     .content_main {
  37.       width: 650px;
  38.       border: 1px solid #00000033;
  39.       text-align: justify;
  40.       margin: 0px 5px 10px 5px;
  41.       padding: 20px;
  42.       border-radius: 5px;
  43.       line-height: 35px;
  44.     }
  46.     .nav_main .active {
  47.       background: #b421f3;
  48.     }
  50.     .content-tab {
  51.       border: none;
  52.     }
  54.     .nav-tabs&gt;li&gt;a {
  55.       background: #e2e2e2;
  56.       border: 1px solid #00000033;
  57.       box-shadow: 0 -2px 0 #2196f3;
  58.       padding: 14px;
  59.       color: #000;
  60.       margin: 0px 15px 0px 5px;
  61.       border-radius: 5px 5px 0 0;
  62.     }
  64.     .content-tab {
  65.       margin-top: 20px;
  66.     }
  68.     .content-tab a:hover {
  69.       text-decoration: none;
  70.     }
  72.     .content-comment {
  73.       margin-right: -10px;
  74.     }
  76. &lt;!-- language: lang-html --&gt;
  78.     &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  79.     &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD&quot; crossorigin=&quot;anonymous&quot;&gt;
  84.     &lt;div class=&quot;container&quot;&gt;
  85.       &lt;div class=&quot;nav_main&quot;&gt;
  86.         &lt;!-- Nav tabs --&gt;
  87.         &lt;ul class=&quot;nav nav-tabs content-tab&quot; role=&quot;tablist&quot; id=&quot;myTab&quot;&gt;
  88.           &lt;li role=&quot;presentation&quot; class=&quot;content-desc&quot;&gt;&lt;a class=&quot;desc active&quot; href=&quot;#desc&quot; aria-controls=&quot;desc&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;content&lt;/a&gt;&lt;/li&gt;
  89.           &lt;li role=&quot;presentation&quot; class=&quot;content-author&quot;&gt;&lt;a class=&quot;author&quot; href=&quot;#author&quot; aria-controls=&quot;author&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;author&lt;/a&gt;&lt;/li&gt;
  90.           &lt;li role=&quot;presentation&quot; class=&quot;content-comment&quot;&gt;&lt;a class=&quot;comment&quot; href=&quot;#comment&quot; aria-controls=&quot;comment&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;comment&lt;/a&gt;&lt;/li&gt;
  91.           &lt;li role=&quot;presentation&quot; class=&quot;content-tag&quot;&gt;&lt;a class=&quot;tag&quot; href=&quot;#tag&quot; aria-controls=&quot;tag&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;tag&lt;/a&gt;&lt;/li&gt;
  92.         &lt;/ul&gt;
  93.         &lt;!-- Tab panes --&gt;
  94.         &lt;div class=&quot;tab-content content_main&quot;&gt;
  95.           &lt;div role=&quot;tabpanel&quot; class=&quot;tab-pane active&quot; id=&quot;desc&quot;&gt;
  96.             desc desc desc desc desc desc desc
  97.           &lt;/div&gt;
  98.           &lt;div role=&quot;tabpanel&quot; class=&quot;tab-pane&quot; id=&quot;author&quot;&gt;
  99.             author author author author author
  100.           &lt;/div&gt;
  101.           &lt;div role=&quot;tabpanel&quot; class=&quot;tab-pane&quot; id=&quot;comment&quot;&gt;
  102.             comment comment comment comment comment comment
  103.           &lt;/div&gt;
  104.           &lt;div role=&quot;tabpanel&quot; class=&quot;tab-pane&quot; id=&quot;tag&quot;&gt;
  105.             tag tag tag tag tag tag
  106.           &lt;/div&gt;
  107.         &lt;/div&gt;
  108.       &lt;/div&gt;
  110.     &lt;/div&gt;
  112. &lt;!-- end snippet --&gt;
  116. Other way : You can enable each tab via click event and initialise your tabs using `bootstrap.Tab()`  and can make the first tab active by calling `.click()` on it .
  118. ***Demo Code*** :
  120. &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
  122. &lt;!-- language: lang-js --&gt;
  124.     const triggerTabList = document.querySelectorAll(&#39;#myTab a&#39;)
  125.     triggerTabList.forEach(triggerEl =&gt; {
  126.       const tabTrigger = new bootstrap.Tab(triggerEl)
  128.       triggerEl.addEventListener(&#39;click&#39;, event =&gt; {
  129.         event.preventDefault()
  130.         tabTrigger.show()
  131.       })
  132.     })
  134.     document.querySelector(&#39;#myTab &gt; li:first-child a&#39;).click()
  136. &lt;!-- language: lang-css --&gt;
  138.     .content_main {
  139.       width: 650px;
  140.       border: 1px solid #00000033;
  141.       text-align: justify;
  142.       margin: 0px 5px 10px 5px;
  143.       padding: 20px;
  144.       border-radius: 5px;
  145.       line-height: 35px;
  146.     }
  148.     .nav_main .active {
  149.       background: #b421f3;
  150.     }
  152.     .content-tab {
  153.       border: none;
  154.     }
  156.     .nav-tabs&gt;li&gt;a {
  157.       background: #e2e2e2;
  158.       border: 1px solid #00000033;
  159.       box-shadow: 0 -2px 0 #2196f3;
  160.       padding: 14px;
  161.       color: #000;
  162.       margin: 0px 15px 0px 5px;
  163.       border-radius: 5px 5px 0 0;
  164.     }
  166.     .content-tab {
  167.       margin-top: 20px;
  168.     }
  170.     .content-tab a:hover {
  171.       text-decoration: none;
  172.     }
  174.     .content-comment {
  175.       margin-right: -10px;
  176.     }
  178. &lt;!-- language: lang-html --&gt;
  180.     &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD&quot; crossorigin=&quot;anonymous&quot;&gt;
  181.     &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  185.     &lt;div class=&quot;container&quot;&gt;
  186.       &lt;div class=&quot;nav_main&quot;&gt;
  187.         &lt;!-- Nav tabs --&gt;
  188.         &lt;ul class=&quot;nav nav-tabs content-tab&quot; role=&quot;tablist&quot; id=&quot;myTab&quot;&gt;
  189.           &lt;li role=&quot;presentation&quot; class=&quot;content-desc&quot;&gt;&lt;a class=&quot;desc&quot; href=&quot;#desc&quot; aria-controls=&quot;desc&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;content&lt;/a&gt;&lt;/li&gt;
  190.           &lt;li role=&quot;presentation&quot; class=&quot;content-author&quot;&gt;&lt;a class=&quot;author&quot; href=&quot;#author&quot; aria-controls=&quot;author&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;author&lt;/a&gt;&lt;/li&gt;
  191.           &lt;li role=&quot;presentation&quot; class=&quot;content-comment&quot;&gt;&lt;a class=&quot;comment&quot; href=&quot;#comment&quot; aria-controls=&quot;comment&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;comment&lt;/a&gt;&lt;/li&gt;
  192.           &lt;li role=&quot;presentation&quot; class=&quot;content-tag&quot;&gt;&lt;a class=&quot;tag&quot; href=&quot;#tag&quot; aria-controls=&quot;tag&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot;&gt;tag&lt;/a&gt;&lt;/li&gt;
  193.         &lt;/ul&gt;
  194.         &lt;!-- Tab panes --&gt;
  195.         &lt;div class=&quot;tab-content content_main&quot;&gt;
  196.           &lt;div role=&quot;tabpanel&quot; class=&quot;tab-pane active&quot; id=&quot;desc&quot;&gt;
  197.             desc desc desc desc desc desc desc
  198.           &lt;/div&gt;
  199.           &lt;div role=&quot;tabpanel&quot; class=&quot;tab-pane&quot; id=&quot;author&quot;&gt;
  200.             author author author author author
  201.           &lt;/div&gt;
  202.           &lt;div role=&quot;tabpanel&quot; class=&quot;tab-pane&quot; id=&quot;comment&quot;&gt;
  203.             comment comment comment comment comment comment
  204.           &lt;/div&gt;
  205.           &lt;div role=&quot;tabpanel&quot; class=&quot;tab-pane&quot; id=&quot;tag&quot;&gt;
  206.             tag tag tag tag tag tag
  207.           &lt;/div&gt;
  208.         &lt;/div&gt;
  209.       &lt;/div&gt;
  211.     &lt;/div&gt;
  213. &lt;!-- end snippet --&gt;
  217. </details>
  221. # 答案2
  222. **得分**: 1
  224. 你可以在不使用jQuery的情况下制作这个。以下是翻译后的部分：
  226. ```html
  227. <!-- 开始片段：js 隐藏: false 控制台: true Babel: false -->
  229. <!-- 语言: lang-css -->
  230. .tab-content {
  231.     max-width: 650px;
  232.     border: 1px solid #00000033;
  233.     text-align: justify;
  234.     margin: 0px 5px 10px 5px;
  235.     padding: 20px;
  236.     border-radius: 5px;
  237.     line-height: 35px;
  238. }
  240. .nav-link.active {
  241.     background-color: #b421f3 !important;
  242. }
  244. .nav-tabs {
  245.     border: none;
  246. }
  248. .nav-tabs > li > .nav-link {
  249.     background: #e2e2e2;
  250.     border: 1px solid #00000033;
  251.     box-shadow: 0 -2px 0 #2196f3;
  252.     padding: 14px;
  253.     color: #000;
  254.     margin: 0px 15px 0px 5px;
  255.     border-radius: 5px 5px 0 0;
  256. }
  258. .nav-tabs {
  259.     margin-top: 20px;
  260. }
  262. .nav-link:hover {
  263.     text-decoration: none;
  264. }
  266. <!-- 语言: lang-html -->
  267. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>
  268. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  270. <div class="container">
  271.   <div class="nav_main">
  272.     <!-- 导航标签 -->
  273.     <ul class="nav nav-tabs" role="tablist">
  274.       <li class="nav-item" role="presentation">
  275.         <button class="nav-link active" id="content-tab" data-bs-toggle="tab" data-bs-target="#content" type="button" role="tab" aria-controls="content" aria-selected="true">content</button>
  276.       </li>
  277.       <li class="nav-item" role="presentation">
  278.         <button class="nav-link" id="author-tab" data-bs-toggle="tab" data-bs-target="#author" type="button" role="tab" aria-controls="author" aria-selected="false">author</button>
  279.       </li>
  280.       <li class="nav-item" role="presentation">
  281.         <button class="nav-link" id="comment-tab" data-bs-toggle="tab" data-bs-target="#comment" type="button" role="tab" aria-controls="comment" aria-selected="false">comment</button>
  282.       </li>
  283.       <li class="nav-item" role="presentation">
  284.         <button class="nav-link" id="tag-tab" data-bs-toggle="tab" data-bs-target="#tag" type="button" role="tab" aria-controls="tag" aria-selected="false">tag</button>
  285.       </li>
  286.     </ul>
  287.                 
  288.     <!-- 标签面板 -->
  289.     <div class="tab-content">
  290.       <div class="tab-pane fade show active" id="content" role="tabpanel" aria-labelledby="content-tab" tabindex="0">
  291.         desc desc desc desc desc desc desc
  292.       </div>
  293.       <div class="tab-pane fade" id="author" role="tabpanel" aria-labelledby="author-tab" tabindex="0">
  294.         author author author author author
  295.       </div>
  296.       <div class="tab-pane fade" id="comment" role="tabpanel" aria-labelledby="comment-tab" tabindex="0">
  297.         comment comment comment comment comment comment
  298.       </div>
  299.       <div class="tab-pane fade" id="tag" role="tabpanel" aria-labelledby="tag-tab" tabindex="0">
  300.         tag tag tag tag tag tag
  301.       </div>
  302.     </div>
  303.   </div>
  304. </div>
  306. <!-- 结束片段 -->
英文:

you can make thit without Jquery

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .tab-content {
  2. max-width: 650px;
  3. border: 1px solid #00000033;
  4. text-align: justify;
  5. margin: 0px 5px 10px 5px;
  6. padding: 20px;
  7. border-radius: 5px;
  8. line-height: 35px;
  9. }
  10. .nav-link.active {
  11. background-color: #b421f3 !important;
  12. }
  13. .nav-tabs {
  14. border: none;
  15. }
  16. .nav-tabs &gt; li &gt; .nav-link {
  17. background: #e2e2e2;
  18. border: 1px solid #00000033;
  19. box-shadow: 0 -2px 0 #2196f3;
  20. padding: 14px;
  21. color: #000;
  22. margin: 0px 15px 0px 5px;
  23. border-radius: 5px 5px 0 0;
  24. }
  25. .nav-tabs {
  26. margin-top: 20px;
  27. }
  28. .nav-link:hover {
  29. text-decoration: none;
  30. }

<!-- language: lang-html -->

  1. &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;/&gt;
  2. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js
  3. &quot;&gt;&lt;/script&gt;
  4. &lt;div class=&quot;container&quot;&gt;
  5. &lt;div class=&quot;nav_main&quot;&gt;
  6. &lt;!-- Nav tabs --&gt;
  7. &lt;ul class=&quot;nav nav-tabs&quot; role=&quot;tablist&quot;&gt;
  8. &lt;li class=&quot;nav-item&quot; role=&quot;presentation&quot;&gt;
  9. &lt;button class=&quot;nav-link active&quot; id=&quot;content-tab&quot; data-bs-toggle=&quot;tab&quot; data-bs-target=&quot;#content&quot; type=&quot;button&quot; role=&quot;tab&quot; aria-controls=&quot;content&quot; aria-selected=&quot;true&quot;&gt;content&lt;/button&gt;
  10. &lt;/li&gt;
  11. &lt;li class=&quot;nav-item&quot; role=&quot;presentation&quot;&gt;
  12. &lt;button class=&quot;nav-link&quot; id=&quot;author-tab&quot; data-bs-toggle=&quot;tab&quot; data-bs-target=&quot;#author&quot; type=&quot;button&quot; role=&quot;tab&quot; aria-controls=&quot;author&quot; aria-selected=&quot;false&quot;&gt;author&lt;/button&gt;
  13. &lt;/li&gt;
  14. &lt;li class=&quot;nav-item&quot; role=&quot;presentation&quot;&gt;
  15. &lt;button class=&quot;nav-link&quot; id=&quot;comment-tab&quot; data-bs-toggle=&quot;tab&quot; data-bs-target=&quot;#comment&quot; type=&quot;button&quot; role=&quot;tab&quot; aria-controls=&quot;comment&quot; aria-selected=&quot;false&quot;&gt;comment&lt;/button&gt;
  16. &lt;/li&gt;
  17. &lt;li class=&quot;nav-item&quot; role=&quot;presentation&quot;&gt;
  18. &lt;button class=&quot;nav-link&quot; id=&quot;tag-tab&quot; data-bs-toggle=&quot;tab&quot; data-bs-target=&quot;#tag&quot; type=&quot;button&quot; role=&quot;tab&quot; aria-controls=&quot;tag&quot; aria-selected=&quot;false&quot;&gt;tag&lt;/button&gt;
  19. &lt;/li&gt;
  20. &lt;/ul&gt;
  21. &lt;!-- Tab panes --&gt;
  22. &lt;div class=&quot;tab-content&quot;&gt;
  23. &lt;div class=&quot;tab-pane fade show active&quot; id=&quot;content&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;content-tab&quot; tabindex=&quot;0&quot;&gt;
  24. desc desc desc desc desc desc desc
  25. &lt;/div&gt;
  26. &lt;div class=&quot;tab-pane fade&quot; id=&quot;author&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;author-tab&quot; tabindex=&quot;0&quot;&gt;
  27. author author author author author
  28. &lt;/div&gt;
  29. &lt;div class=&quot;tab-pane fade&quot; id=&quot;comment&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;comment-tab&quot; tabindex=&quot;0&quot;&gt;
  30. comment comment comment comment comment comment
  31. &lt;/div&gt;
  32. &lt;div class=&quot;tab-pane fade&quot; id=&quot;tag&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;tag-tab&quot; tabindex=&quot;0&quot;&gt;
  33. tag tag tag tag tag tag
  34. &lt;/div&gt;
  35. &lt;/div&gt;
  36. &lt;/div&gt;
  37. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年3月21日 00:52:45
  • 转载请务必保留本文链接：https://go.coder-hub.com/75793138.html
  • css
  • javascript
  • jquery
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定