1

したがって、クリックするとdivのタブを切り替えるこのjqueryコードがあります...外部ソースでjavascriptをホストする必要があり、次のように呼び出しました:

<script src="(link here).js?auto></script>

そして、タブを適切に設定するので実行されることはわかっていますが、タブを切り替えません。タブをクリックすると、「http:// (mywebsite).com/#tab1/」ではなく「http:// #tab1/」が開きます

これが私のコードです：

$(function () {
$('div.tabgroup').each(function () {
    var $active, $content, $links = $(this).find('a');
    $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
    $active.addClass('active');
    $content = $($active.attr('href'));
    $links.not($active).each(function () {
        $($(this).attr('href')).hide()
    });
    $(this).on('click', 'a', function (e) {
        $active.removeClass('active');
        $content.hide();
        $active = $(this);
        $content = $($(this).attr('href'));
        $active.addClass('active');
        $content.show();
        e.preventDefault()
    })
})
});

リンクの前に現在の Web サイトの URL を追加するにはどうすればよいですか? ライブ デモはこちらで見ることができます: http://test-theme-one.tumblr.com/test

4

2 に答える 2

2

http://jsfiddle.net/mauRG/

各コンテンツ領域にクラスを適用して単純化しました。HTML:

<div class="tabgroup"><a href="#home1">#home1</a></div>
<div class="tabgroup"><a href="#home2">#home2</a></div>
<div class="tabgroup"><a href="#home3">#home3</a></div>
<div class="tabgroup"><a href="#home4">#home4</a></div>
<div class="tabgroup"><a href="#home5">#home5</a></div>

<div id="home1" class="content-area">This is #home1's Content</div>
<div id="home2" class="content-area">This is #home2's Content</div>
<div id="home3" class="content-area">This is #home3's Content</div>
<div id="home4" class="content-area">This is #home4's Content</div>
<div id="home5" class="content-area">This is #home5's Content</div>

JS:

$(function () {
    var $tabs = $('div.tabgroup'),
        $links = $tabs.find('a'),
        $active = function(){
                var ret = $links.eq(0);
                $links.each(function(){
                    if ($(this).attr('href') == location.hash){
                        ret = $(this);
                    }
                });
                return ret;
            }(),
        $contentAreas = $('.content-area'),
        $activecontent = $($active.attr('href'));

    $active.addClass('active');
    $contentAreas.hide();
    $activecontent.show();

    $tabs.on('click','a',function(e){
        e.preventDefault();
        $active = $(this);
        $activecontent = $($active.attr('href'));

        $links.removeClass('active');
        $active.addClass('active');

        $contentAreas.hide();
        $activecontent.show();
    });
});
于 2013-08-22T20:05:51.153 に答える
0

いくつかの問題があります。

1. クリックしてもコンテンツが切り替わらないタブ

のような URL があるため、タブはコンテンツを切り替えませんが、期待どおりhttp://.oneではありません.one。したがって、問題を解決するにはhttp://、リンク URL から削除する必要があります。それを行う方法の1つは、置き換えることです

$(this).attr('href')

と

$(this).attr('href').split(/https?:\/\//).pop()

そのようなプレフィックスがある場合、リンク URL から削除http://されます。https://

2.ハッシュを使用して特定のタブに移動することはできません

まず、式はURL の$links.filter('[href="' + location.hash + '"]')[0]href を含むリンクを返します。つまり、リンクは likeと not likeである必要があり、コンテンツは, but not である必要があります。#onehttp://test-theme-one.tumblr.com/test#one<a href="#one">...</a><a href="http://.one">...</a><div id="one"></div><div class="one"></div>

コンテンツの ID の代わりにクラスを使用したい場合は#、ロケーション ハッシュ ( のようなものlocation.hash.substring(1)) から削除し、次のようなリンクを使用する必要があります。<a href="#.one">...</a>

結論

最後に、html は次のようになります。

<div class="tabgroup">
    <a href="#one"></a>
    <a href="#two"></a>
    <a href="#three"></a>
    <div class="comment">
        <div id="one">...</div>
        <div id="two">...</div>
        <div id="tree">...</div>
    </div>
</div>

そしてあなたのJavaScript：

$(window.onhashchange = function () {
    var hash = location.hash || $('.tabgroup a:first').attr('href');
    $('.tabgroup a').
        removeClass('active').
        find('[href="' + hash + '"]').
        addClass('active');
    $('.tabgroup .comment>div').
        hide().
        find(hash).
        show();
});

PS

ところで、JavaScript をまったく使用せずにタブを実装することもできます:target。CSS セレクターを見てください。ここでhttp://css-tricks.com/css3-tabs/を実行する方法を見つけることができます:)

于 2013-08-22T19:29:04.330 に答える