选择选项卡,默认的jQuery

感谢JAAulde进行更新。 罗纳尔多,也很想有一些问题。

$( function() { var tabs = $( 'ul.sideMenu a' ), selected, hashes = [], tabContainers; tabs.each( function() { var locationhash, linkhash, selectthis; locationhash = ( window.location.hash !== '' ) ? window.location.hash : '#index'; linkhash = this.hash; if( this.pathname === window.location.pathname ) { hashes.push( linkhash ); selectthis = ( linkhash === locationhash ); $( this ).toggleClass( 'selected', selectthis ); $( linkhash ).toggle( selectthis ); } } ); tabContainers = $( hashes.join( ', ' ) ); tabs.bind( 'click', function( e ) { // hide all tabs tabContainers .hide() .filter( this.hash ) .show(); // set up the selected class tabs.removeClass( 'selected bluecolor' ); $( this ).addClass( 'selected bluecolor' ); e.preventDefault() } ); } );

菜单 - URL网址

内容 -

<div id="URL">content</div> <div id="Content2">content2</div>

所以,我仍然不能得到它来选择在页面加载的第一个标签。 相反,它的加载一个空白页。

我也有在IE浏览器漏洞“消息:”this.style'为空或不是对象行:30字符:9“在IE整个页面加载,当我点击链接它只是就像一个锚。 这是推动我疯了。 任何帮助极大的赞赏。 如果我得到它的工作我会更新在这里。

--------------解决方案-------------

在您的代码this.pathname因为这是不具有这种属性在默认情况下一个锚对象this.hash不会放弃任何东西。 尝试这个

$(function () {
var tabs = [];
var tabContainers = [];
$('ul.sideMenu a').each(function () {
// note that this only compares the pathname, not the entire url
// which actually may be required for a more terse solution.
if (window.location.pathname.indexOf(this.href) != -1) {
tabs.push(this);
tabContainers.push(this.href.split("#")[1]).get(0));
}
});
$(tabs).click(function () {
// hide all tabs
$("#"+tabContainers).hide().filter("#"+this.href.split("#")[1]).show();

// set up the selected class
$(tabs).removeClass('selected');
$(this).addClass('selected');

return false;
});
});

我有一个标签系统,我想与你相似。 我使用的代码是基于过滤器,不同类别的不同选项卡的内容相关联。

JS / jQuery的

$(document).ready(function(){
fillConfeRegList(getEventID()); // Fill the contents (Must use your code to fill the container)
// Set the default tab VISIBLE
applyFilter('pendente');
});

function applyFilter(state){
$('#inscContainer .item').each(function(index){
(!$(this).hasClass(state))?$(this).hide():$(this).show();
});

$('#filterControl .filterTab').each(function(index){
($(this).hasClass('filter-'+state))?$(this).addClass("currentFilter"):$(this).removeClass("currentFilter");
});

}

HTML

<div id="filterControl">
<input type="button" id="cmdFilterItemsAll" class="filterTab filter-item" onclick="javascript:applyFilter('item');" value="Ver Todos" />
<input type="button" id="cmdFilterItemsPendentes" class="filterTab filter-pendente currentFilter" onclick="javascript:applyFilter('pendente');" value="Ver Pendentes" />
<input type="button" id="cmdFilterItemsProcessado" class="filterTab filter-processado" onclick="javascript:applyFilter('processado');" value="Ver Processados" />
</div>
<div id="inscContainer" style="display: block; ">&nbsp;</div>

我相信您的问题是,在文件准备好你的目标ul.sideMenu a 。 但是,你的代码展示了一个LIID设置为sideMenu (而不是类)。

匹配你的选择元素/符有什么在DOM,或交的代码,提供了更好的环境。

编辑:根据您的回答标记是好的,你的点击部分正在工作。 所以,现在你需要加载哪些浏览器加载过程中确定的,当你看到一个链接,匹配您需要选择它。 下面我给的代码应该为你工作,或让你感动,你想要的。 我认为有更好的方法来写,但我想避免过多的修饰你的代码,以便它是有点识别你。 我个人比较喜欢使用jQuery UI这样的事情。 但如果这是UI提供了您将要使用的唯一的东西,那么它可能矫枉过正。

码:

$( function()
{
var tabs = $( 'ul.sideMenu a' ),
selected,
hashes = [],
tabContainers;

tabs.each( function()
{
var locationhash, linkhash, selectthis;

locationhash = ( window.location.hash !== '' ) ? window.location.hash : '#index';
linkhash = this.hash;

if( this.pathname === window.location.pathname )
{
hashes.push( linkhash );

selectthis = ( linkhash === locationhash );

$( this ).toggleClass( 'selected', selectthis );
$( linkhash ).toggle( selectthis );
}
} );

tabContainers = $( hashes.join( ', ' ) );

tabs.bind( 'click', function( e )
{
// hide all tabs
tabContainers
.hide()
.filter( this.hash )
.show();

// set up the selected class
tabs.removeClass( 'selected' );
$( this ).addClass( 'selected' );

e.preventDefault()
} );
} );

分类:jQuery的 时间:2012-03-27 人气:0
本文关键词: jQuery的
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.888 (s). 10 q(s)