Question

我正在尝试链接到单独选项卡中的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位置。

我愿意接受建议。

Answer 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;}

Fiddle！希望这是使用标签的最佳方式。：）

Answer 2

您可以使用以下jQuery来实现类似效果的“标签”

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

请参阅此live example

这是updated example，其中div包含在无序列表中

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

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

另一个live example在这里

在单独的选项卡中链接到div

2 个答案: