1

所以我有这个 jquery 代码，当我点击它们时，它会在 div 中切换选项卡......我需要将 javascript 托管在外部源上，我已经这样调用它：

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

而且我知道它运行是因为它正确设置了选项卡，但它不会切换它们。当我单击选项卡时，它会打开“http://#tab1/”而不是“http:// (mywebsite).com/#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()
    })
})
});

我怎样才能使它在链接之前添加当前网站的网址？可以在这里看到它的现场演示：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 中删除。一种方法是更换

$(this).attr('href')

和

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

如果它们确实有这样的前缀，它将从链接 URL 中http://删除。https://

2.您无法使用哈希导航到特定选项卡

首先，表达式$links.filter('[href="' + location.hash + '"]')[0]将返回带有 href#one的 URL链接http://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();
});

附言

顺便说一句，你可以完全不使用 JavaScript 来实现选项卡，只需看看:targetCSS 选择器。在这里http://css-tricks.com/css3-tabs/你可以找到怎么做:)

于 2013-08-22T19:29:04.330 回答