javascript - jQuery 和 TailwindCss 上的选项卡

Question

本机有问题。我的设计中有标签，当我进入页面时，它们都是打开的，当我选择某个标签时，其余的都是隐藏的。

        document.getElementById("one").onclick = function () {
            showTab(this)
        };
        document.getElementById("two").onclick = function () {
            showTab(this)
        };
        document.getElementById("three").onclick = function () {
            showTab(this)
        };
        document.getElementById("foure").onclick = function () {
            showTab(this)
        };

        function showTab(e) {
            let selectType = $(e).attr("data-select");
            if (selectType == 'one') {
                $("#tabs2,#tabs3,#tabs4").hide();
                $("#tabs1").show();
                $("#one").addClass('text-blue-800 active');
                $("#two,#three, #foure").removeClass('text-blue-800 active');

            } else if (selectType == 'two') {

                $("#tabs1,#tabs3,#tabs4").hide();
                $("#tabs2").show();
                $("#two").addClass('text-blue-800 active');
                $("#one,#three,#foure").removeClass('text-blue-800 active').addClass('text-blue-400');

            } else if (selectType == 'three') {

                $("#tabs1,#tabs2,#tabs4").hide();
                $("#tabs3").show();
                $("#three").addClass('text-blue-800 active');
                $("#one,#two,#foure").removeClass('text-blue-800 active').addClass('text-blue-400');

            } else if (selectType == 'foure') {

                $("#tabs1,#tabs2,#tabs3").hide();
                $("#tabs4").show();
                $("#foure").addClass('text-blue-800 active');
                $("#one,#two,#three").removeClass('text-blue-800 active').addClass('text-blue-400');

            }
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.4/tailwind.min.css" rel="stylesheet"/>
<div class="py-10">
                    <ul class="list-reset flex border-b">
                        <li class="p-0">
                            <a class="bg-white inline-block py-2 px-4 text-blue-800 font-semibold active"
                               data-select="one" id="one" href="javascript:void(0)">Tabs 1</a>
                        </li>
                        <li class="p-0">
                            <a class="bg-white inline-block py-2 px-4 text-blue-400  hover:text-blue-600 font-semibold"
                               data-select="two" id="two" href="javascript:void(0)">Tabs 2</a>
                        </li>
                        <li class="p-0">
                            <a class="bg-white inline-block py-2 px-4 text-blue-400 hover:text-blue-800 font-semibold"
                               data-select="three" id="three" href="javascript:void(0)">Tabs 3 </a>
                        </li>
                        <li class="p-0">
                            <a class="bg-white inline-block py-2 px-4 text-blue-400 hover:text-blue-800 font-semibold"
                               data-select="foure" id="foure" href="javascript:void(0)">Tabs 4 </a>
                        </li>
                    </ul>
                    <div class="content">
                        <div id="tabs1">
                            <table class="w-full bg-gray-600">
                                <tr class="h-12">
                                    <td class="w-2/3 pl-5 font-semibold text-white">name 1</td>
                                    
                                </tr>
                            </table>
                        </div>
                        <div id="tabs2" class="d-none">
                            <table class="w-full bg-gray-600">
                                <tr class="h-12">
                                    <td class="w-2/3 pl-5 font-semibold text-white">name 2</td>
                                    
                                </tr>
                            </table>
                        </div>
                        <div id="tabs3" class="d-none">
                            <table class="w-full bg-gray-600">
                                <tr class="h-12">
                                    <td class="w-2/3 pl-5 font-semibold text-white">name 3</td>
                                    
                                </tr>
                            </table>
                        </div>
                        <div id="tabs4" class="d-none">
                            <table class="w-full bg-gray-600">
                                <tr class="h-12">
                                    <td class="w-2/3 pl-5 font-semibold text-white">name 4</td>
                                    
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>

在此示例中，您可以看到选项卡现在是如何工作的。也就是说，直到我单击任何用于过渡的选项卡之前，它们都不会被隐藏，然后，就好像什么都没发生一样，一切正常

标签： javascripthtmljquerytabstailwind-css

Answer 1

我已将您的代码重构为此，您可以重构更多

$(document).ready(function() {
  $(".js_tap_btn").click(function() {
    $(".js_tap_btn").removeClass("active text-blue-800").addClass("text-blue-400 hover:text-blue-800"); //removing active and font-text-800 from all tab btns, add hover:text-blue-800 in all tabs
    $(this).removeClass("text-blue-400 hover:text-blue-800").addClass("active text-blue-800"); // adding active class and text color to clicked tab
    let tab_to_show = $(this).data("tab_id"); // getting tab id to un-hide from clicked tab using data attribute;
    $(".js_tab_view").addClass("hidden"); //hiding all tabs using tailwind css;
    $(`#${tab_to_show}`).removeClass("hidden"); // removing class hidden from wanted tab only, note that i am using Grave Accent symbol instead for inverted comma ;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.4/tailwind.min.css" rel="stylesheet" />
<div class="py-10">
  <ul class="list-reset flex border-b">
    <li class="p-0">
      <a class="js_tap_btn bg-white inline-block py-2 px-4 text-blue-800 font-semibold active" data-tab_id="tabs1" href="javascript:void(0)">Tabs 1</a>
    </li>
    <li class="p-0">
      <a class="js_tap_btn bg-white inline-block py-2 px-4 text-blue-400 hover:text-blue-800 font-semibold" data-tab_id="tabs2" href="javascript:void(0)">Tabs 2</a>
    </li>
    <li class="p-0">
      <a class="js_tap_btn bg-white inline-block py-2 px-4 text-blue-400 hover:text-blue-800 font-semibold" data-tab_id="tabs3" href="javascript:void(0)">Tabs 3 </a>
    </li>
    <li class="p-0">
      <a class="js_tap_btn bg-white inline-block py-2 px-4 text-blue-400 hover:text-blue-800 font-semibold" data-tab_id="tabs4" href="javascript:void(0)">Tabs 4 </a>
    </li>
  </ul>
  <div class="content">
    <div id="tabs1" class="js_tab_view">
      <table class="w-full bg-gray-600">
        <tr class="h-12">
          <td class="w-2/3 pl-5 font-semibold text-white">name 1</td>
        </tr>
      </table>
    </div>
    <div id="tabs2" class="js_tab_view hidden">
      <table class="w-full bg-gray-600">
        <tr class="h-12">
          <td class="w-2/3 pl-5 font-semibold text-white">name 2</td>
        </tr>
      </table>
    </div>
    <div id="tabs3" class="js_tab_view hidden">
      <table class="w-full bg-gray-600">
        <tr class="h-12">
          <td class="w-2/3 pl-5 font-semibold text-white">name 3</td>
        </tr>
      </table>
    </div>
    <div id="tabs4" class="js_tab_view hidden">
      <table class="w-full bg-gray-600">
        <tr class="h-12">
          <td class="w-2/3 pl-5 font-semibold text-white">name 4</td>
        </tr>
      </table>
    </div>
  </div>
</div>