jQuery:不执行功能的一部分
我在页面上有一个选项卡式设置,我想自动根据#hash高亮显示相应的菜单选项卡以及相应的内容div显示。jQuery:不执行功能的一部分
例子:
http://design.vitalbmx.com/user_menu/member_profile_so.html - 没有散,打开第一个选项卡
http://design.vitalbmx.com/user_menu/member_profile_so.html#setup - #setup,应该打开 “设置” 选项卡
正如你可以看到它的工作原理为突出 “设置”标签。但内容div不会改变。
的脚本如下:
var tab_content_current = 1; switch (window.location.hash) { case '#activity': tab_content_current = 1; break; case '#friends': tab_content_current = 2; break; case '#photos': tab_content_current = 3; break; case '#videos': tab_content_current = 4; break; case '#setup': tab_content_current = 5; break; case '#forum': tab_content_current = 6; break; case '#blog': tab_content_current = 7; break; case '#comments': tab_content_current = 8; break; case '#favorites': tab_content_current = 9; break; case '#profile-comments': tab_content_current = 10; break; default: tab_content_current = 1; } if (tab_content_current != 1) { change_active_tab (tab_content_current); } function tabs_toggle (id) { if (id != tab_content_current) { change_active_tab (id); tab_content_current = id; } } function change_active_tab (id) { $j('.profile_tabs li').removeClass('active'); if (id < 8) $j('.profile_tab_'+id).addClass('active'); $j('.profile_content').hide(); $j('#profile_content_'+id).fadeIn(); }
注意,它的工作原理,当你实际点击菜单选项卡。
任何帮助解决这个问题将不胜感激。
将脚本移动到页面的最底部,位于profile_content div之后。这样他们将在脚本运行之前在DOM中。 It is also best to put scripts at the bottom of the page for speed reasons。
嘿,把#这个主要内容div之外的这段JS工作起来了! – 2010-06-03 17:20:10
@SODA - 这就是'ready()'所做的事情,只有跨浏览器兼容性保险才更可靠。 – user113716 2010-06-03 17:22:15
该部分代码不在jQuery ready()
调用中,因此DOM在运行时尚未加载。
编辑:标签工作的原因是脚本看起来在HTML内容的中间。剧本出现在剧本之前,内容随之而来。所以标签加载,内容部分不是。
这样做:
$(document).ready(function() {
var tab_content_current = 1;
switch (window.location.hash) {
case '#activity': tab_content_current = 1; break;
case '#friends': tab_content_current = 2; break;
case '#photos': tab_content_current = 3; break;
case '#videos': tab_content_current = 4; break;
case '#setup': tab_content_current = 5; break;
case '#forum': tab_content_current = 6; break;
case '#blog': tab_content_current = 7; break;
case '#comments': tab_content_current = 8; break;
case '#favorites': tab_content_current = 9; break;
case '#profile-comments': tab_content_current = 10; break;
default: tab_content_current = 1;
}
if (tab_content_current != 1) {
change_active_tab (tab_content_current);
}
function tabs_toggle (id) {
if (id != tab_content_current) {
change_active_tab (id);
tab_content_current = id;
}
}
function change_active_tab (id) {
$j('.profile_tabs li').removeClass('active');
if (id < 8) $j('.profile_tab_'+id).addClass('active');
$j('.profile_content').hide();
$j('#profile_content_'+id).fadeIn();
}
});
或者只是把脚本在页面的末端。无论如何,好主意总是使用ready()
。
我正要问这个...... – hunter 2010-06-03 17:05:36
@ hunter - 是的,它似乎是罪魁祸首。我更新了我的答案,指出脚本位于页面中间。标签之前,所以他们工作,但内容来之后,所以它不。 – user113716 2010-06-03 17:10:56
它不在里面,但$ j值已经被初始化,所以它不一定是。 加上它不会改变活动选项卡,如果它根本没有被调用。 – 2010-06-03 17:15:26
尝试设置你的<li>
元素像这样:
<ul class="profile_tabs light">
<li class="profile_tab_1 active"><a href="#activity">Activity</a></li>
可以更方便地写一些jQuery来标签,像这样:
var tab_content_current = 1;
function GetIndex($obj) { return $(this).parent().children().index($obj); }
$j(function(){
$j(".profile_tabs li").click(function(e){
e.preventDefault();
change_active_tab(GetIndex(this) + 1)
});
function change_active_tab (id) {
tab_content_current = id;
$j('.profile_tabs li').removeClass('active');
if (id < 8) $j('.profile_tab_'+id).addClass('active');
$j('.profile_content').hide();
$j('#profile_content_'+id).fadeIn();
}
var hash = window.location.hash;
if (hash != null && hash != "")
{
var $li = $(".profile_tabs li a[href=" + hash + "]");
change_active_tab(GetIndex($li) + 1)
}
});
您是否尝试过通过它在Firebug加强揣摩出它出错了? – justkt 2010-06-03 16:52:05
将链接更改为javascript:void(0)not void()。可能不是这里的问题,但它显示在萤火虫 – Adam 2010-06-03 16:57:37
不,萤火虫不会在这方面发生任何错误。 – 2010-06-03 17:13:56