0

我试图在不使用 jquery 选项卡插件的情况下创建选项卡菜单。并且我将tabheader类创建为选项卡菜单。单击其子<a>类时，该类tabed_contents显示我尝试使用选项卡菜单id中tabed_contents的锚标记的 href 来实现此标记。

<ul class="tabheader">

<li class="active" ><a href="#fragment-1"><span>FAQs</span></a></li>

</ul>

<div id="fragment-1" class="tabed_contents">
aasd

</div>

我的小提琴 我得到了href值并使resected id显示形式隐藏。在那之后我完全被击中了..帮帮我

我的jq

 $('.tabs > ul.tabheader > li > a').on('click', function() {

  var href = $(this).attr('href');
    $(href).show();
})
4

3 回答 3

1

我可以看到的一件事是元素保持显示，只需使用以下行隐藏所有项目，然后再显示相应的项目：

  $('.tabed_contents').hide();

还有你不使用jQuery UI Tabs的原因吗？

如果您需要更多帮助，请您详细说明您的问题，因为您实际上并没有指定您想要实现的目标。

于 2013-10-03T10:36:26.027 回答
0

因为您使用的是锚标记，所以您需要防止锚的链接刷新您的浏览器。为此，我们可以使用preventDefault(). 这涉及通过函数调用传递事件：

...'click', function(event) { ...

然后调用：

event.preventDefault();

附带说明一下，您不应该使用 jQuery 的attr()方法来拉取href链接，而可以简单地使用this.href.

总之，您的函数最终将如下所示：

$('.tabs > ul.tabheader > li > a').on('click', function(event) {
    /* Prevent the link event from refreshing the page. */
    event.preventDefault();

    var href = this.href;
    $(href).show();
})
于 2013-10-03T10:35:40.357 回答
0

你必须hide首先喜欢所有的div，

$('.tabs > ul.tabheader > li > a').on('click', function() {
    $('.tabed_contents').hide();// hide previously shown containers
    var href = $(this).attr('href');
    $(href).show();// shows the div for which your tab is selected

    $('.tabs > ul.tabheader > li').removeClass('active');
    // add class to li
    $(this).closest('li').addClass('active');
});
于 2013-10-03T10:38:16.850 回答