所以我有这个 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()
})
})
});
我怎样才能让它在链接之前添加当前网站的 url? 可以在这里看到它的现场演示:http://test-theme-one.tumblr.com/test
最佳答案
我将一个类应用到每个内容区域以简化事物。 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();
});
});
关于javascript - 当由外部源托管时,jquery 代码停止工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18389007/