如何使用 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中文网其他相关文章！
