Question

所以我有这个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

Answer 1

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();
    });
});

Answer 2

您有几个问题：

<强> 1。标签在单击时不切换内容

您的标签不会切换内容，因为它们有http://.one之类的网址，而不是您期望的.one。因此，要解决此问题，您应该从链接网址中删除http://。其中一种方法是替换

$(this).attr('href')

与

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

会从链接网址中删除http://和https://，以防它们具有此类前缀。

<强> 2。您无法使用哈希

导航到特定标签

首先，表达式$links.filter('[href="' + location.hash + '"]')[0]将返回网址#one的href http://test-theme-one.tumblr.com/test#one链接，这意味着您的链接应该像<a href="#one">...</a>而不是{{1}您的内容应该是<a href="http://.one">...</a>，而不是<div id="one"></div>。

如果您确实要使用类而不是内容的ID，则应从位置哈希中删除<div class="one"></div>（类似#），并使用location.hash.substring(1)等链接

<强>结论

最后你的html应该是：

<a href="#.one">...</a>

和你的JavaScript：

<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>

<强> P.S。

顺便说一下，你可以实现没有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(); }); CSS选择器。这里http://css-tricks.com/css3-tabs/你可以找到如何做到这一点：）

当由外部源托管时，jquery代码停止工作

2 个答案: