如何使用 jQuery 建立簡單的選項卡？
在網站上建立選項卡時，您可能會遇到跳轉連結在某些情況下不起作用的問題內容管理系統。這可能會導致選項卡式內容無法如預期顯示。要解決此問題，確保正確實作 HTML 和 jQuery 程式碼非常重要。
讓我們考慮以下HTML 程式碼：
<code class="html"><ul id="tabs"> <li><a href="#tab1">test1</a></li> <li><a href="#tab2">test2</a></li> <li><a href="#tab3">test3</a></li> <li><a href="#tab4">test4</a></li> </ul> <div class="container" id="tab1">Some content</div> <div class="container" id="tab2">Some content</div> <div class="container" id="tab3">Some content</div> <div class="container" id="tab4">Some content</div></code>
以及以下jQuery 程式碼：
<code class="javascript">$('#tabs li a:not(:first)').addClass('inactive');
$('.container').hide();
$('.container:first').show();
$('#tabs li a').click(function() {
var t = $(this).attr('href');
$('#tabs li a').addClass('inactive');
$(this).removeClass('inactive');
$('.container').hide();
$(t).fadeIn('slow');
return false;
})
if($(this).hasClass('inactive')){ //this is the start of our condition
$('#tabs li a').addClass('inactive');
$(this).removeClass('inactive');
$('.container').hide();
$(t).fadeIn('slow');
}</code>在這種情況下，問題似乎出在錨標記的href屬性上。當使用者點擊選項卡時，href 屬性會使用跳躍連結將瀏覽器導向到頁面的特定部分。由於跳轉連結在您的 CMS 中不起作用，因此選項卡式內容無法正確顯示。
要解決此問題，我們可以更改 href 屬性以使用 ID 而不是部分名稱。此外，我們需要更新 jQuery 程式碼以使用 id 屬性來顯示正確的選項卡內容。
這是更新的HTML：
<code class="html"><ul id="tabs"> <li><a id="tab1">test1</a></li> <li><a id="tab2">test2</a></li> <li><a id="tab3">test3</a></li> <li><a id="tab4">test4</a></li> </ul> <div class="container" id="tab1C">Some content</div> <div class="container" id="tab2C">Some content</div> <div class="container" id="tab3C">Some content</div> <div class="container" id="tab4C">Some content</div></code>
更新的jQuery：
<code class="javascript">$('#tabs li a').click(function() {
var t = $(this).attr('id');
if($(this).hasClass('inactive')){ //this is the start of our condition
$('#tabs li a').addClass('inactive');
$(this).removeClass('inactive');
$('.container').hide();
$('#'+ t + 'C').fadeIn('slow');
}
});</code>透過使用ID 並調整jQuery 程式碼以使用id 屬性，我們可以確保使用者點擊選項卡時顯示正確的選項卡內容，即使在停用跳轉連結的情況下也是如此。
以上是為什麼我的選項卡在 CMS 中無法正常工作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
