jQuery 和 TailwindCss 上的选项卡
Posted
技术标签:
【中文标题】jQuery 和 TailwindCss 上的选项卡【英文标题】：Tabs on jQuery and TailwindCss 【发布时间】：2021-06-17 19:27:42 【问题描述】：设备有问题。 我的设计中有标签，当我进入页面时，它们都是打开的，当我选择某个标签时，其余的都是隐藏的。
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>在此示例中，您可以看到选项卡现在是如何工作的。也就是说，在我单击任何过渡选项卡之前，它们不会被隐藏，然后，就好像什么都没发生一样，一切正常
【问题讨论】：
您能详细说明您的问题吗？我没有得到你想要的。 @BikiMaharjan，如果你打开sn-p，你可以看到你有四个标签是活跃的，只有标签1应该是活跃的 既然你使用的是tailwind，你应该使用“隐藏”类而不是“d-none”，“d-none”来自引导程序，将d-none替换为hidden类然后它会工作正常，但重构代码的可能性很大，我会在重构后回复，但现在，将 d-none 替换为隐藏类
【参考方案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>【讨论】：
不客气@YuraLons以上是关于jQuery 和 TailwindCss 上的选项卡的主要内容，如果未能解决你的问题，请参考以下文章
在 React 中条件渲染组件上的 TailwindCSS 动画