0

我正在尝试链接到单独选项卡中的 div。目前侧边导航链接是这样的：

var loc = window.location.hash;
if (loc == "#bargain") {
    jQuery('.tab-2').click();
    App.SetBaseLine();
    jQuery('#bargain').addClass('activeListColor');
};

      <li><a href="default.aspx#bargain">Bargain Packages</a></li>

    <!-- start of tabHolder -->
    <div id="tabHolder">
        <ul class="tabs_new buttons">
            <li class="liOuter" id="tab1"><a href="#" class="current tab-1">Buyers' Guide</a></li>
            <li class="liInner" id="tab2"><a href="#" class="tab-2">Pricing Guide</a></li>
        </ul>

不幸的是，这并没有把我带到第二个标签下。我试图让用户单击链接，它会打开选​​项卡并锚定到 div 位置。

我愿意接受建议。

4

2 回答 2

1

你可以这样做：

<ul class="tab">
    <li><a href="#tab1">One</a></li>
    <li><a href="#tab2">Two</a></li>
    <li><a href="#tab3">Three</a></li>
</ul>
<div class="tabs">
    <div id="tab1">Content 1</div>
    <div id="tab2">Something here</div>
    <div id="tab3">Omg! Three</div>
</div>

脚本为：

$(document).ready(function(){
    $(".tab > li > a").click(function(){
        var tab = $(this).attr('href');
        $(".tab > li > a").removeAttr("style");
        $(this).css("background-color", "#ccc");
        $('.tabs > div:visible').hide(function(){
            $(tab).show();
        });
        return false;
    });
    $('.tabs > div').hide();
    $('.tabs > div:first-child').show();
});

CSS：

body {overflow: hidden;}
ul li {display: inline-block; *display: inline; *zoom: 1;}
a {text-decoration: none; color: #f60; border-radius: 5px; padding: 5px; display: inline-block; *display: inline; *zoom: 1;}
div {padding: 5px;}

小提琴！希望这是使用标签的最佳方式。:)

于 2012-06-08T16:09:27.537 回答
0

您可以使用以下 jQuery 来实现类似“选项卡”的效果

​$('a').click(function() {
    $('div').hide();
    var destination = '#' + $(this).attr('data-tab');
    $(destination).toggle();
});​

看这个活生生的例子

这是一个更新的示例，其中 div 包含在无序列表中

或者，您可以使用“当前”类并使用以下代码在单击时切换它：

$('a').click(function() {
    $('.tabs div').removeClass('current');
    var destination = '#' + $(this).attr('data-tab');
    $(destination).toggleClass('current');
});​

另一个活生生的例子在这里

于 2012-06-08T16:00:22.910 回答