Javascript jquery代码在由外部源托管时停止工作

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

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

我怎样才能使它在链接之前添加当前的网站url？

---

可以在这里看到它的现场演示：

您有几个问题：

1。单击时不切换内容的选项卡

您的选项卡不会切换内容，因为它们具有类似

http://.one

，但不是

。如您所料，一个
。因此，要解决这个问题，您应该从链接URL中删除
http://
。其中一种方法是替换

$(this).attr('href')

与

这将从链接URL中删除
http://
和
https://
，以防它们有这样的前缀

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

首先，表达式
$links.filter（'[href=“'+location.hash+'”]）[0]
将返回URL
的带有href
#one
的链接http://test-theme-one.tumblr.com/test#one
，这意味着你的链接应该像
而不是
，你的内容应该是
，但不是

如果您确实希望对内容使用类而不是ID，那么您应该从位置哈希（类似于
location.hash.substring（1）
）中删除
），并使用类似于
的链接

结论

最后，您的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>

p.S.

顺便说一句，您完全可以在不使用JavaScript的情况下实现选项卡，只需看看
：target
CSS选择器。在这里您可以找到如何操作：）

我将一个类应用于每个内容区域，以实现简单的事情。
HTML:

我不知道你有什么问题，但标签对我来说很好。标签，是的，但不是它们的内容。更新了我的演示。。。首先，它将所有选项卡分组，然后您必须单击每个选项卡，使其显示自己的内容。。。我认为问题在于，由于它是外部托管的，所以它不知道要将“/.one”添加到哪个网站。它们是将当前网站url添加到我的原始jquery代码中的一种方法吗？@dsherv
location.origin+location.pathname
将为您提供网站的完整路径（包括应用程序/文件夹名称）
$(this).attr('href').split(/https?:\/\//).pop()

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

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

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

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