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>

残念ながら、これでは 2 番目のタブに移動できません。ユーザーにリンクをクリックさせようとすると、タブが開き、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 に答える