JQuery選項卡是一種非常流行和常用的Web前端開發技術,它能夠幫助你快速地構建一個漂亮的選項卡效果,讓用戶更好地瀏覽你的網站內容。同時,JQuery選項卡也能夠很好地適應手機端的瀏覽需求,使得網頁在移動端也能夠保持優美的布局和良好的用戶體驗。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$(".tab-header li").click(function(){
var tab_id = $(this).attr("data-tab");
$(".tab-header li").removeClass("active");
$(".tab-content").removeClass("active");
$(this).addClass("active");
$("#" + tab_id).addClass("active");
});
});
</script>
如上代碼展示一個簡單的jQuery選項卡效果,通過點擊選項卡標簽來切換對應內容的顯示與隱藏。其中,我們先通過jQuery選擇器查詢到所有的選項卡標簽,為其添加點擊事件,當用戶點擊時通過獲取這個標簽自定義的"data-tab"屬性值來查詢出對應的內容的DOM元素,然后將所有的選項卡和內容全部去掉"active"類名,給當前被選中的選項卡和內容添加"active"類名,以實現內容的切換。