我需要一些TAB代码的帮助,Jquery
问题描述:
这么长的故事总结,即时通讯工作与一些jQuery的标签和即时通讯使用此代码。我需要一些TAB代码的帮助,Jquery
css of the tabs:
/* ---------- INNER CONTENT (ACCORDION) STYLES ----*/
.accordian {
background-color:#fff;
margin:20px auto;
color:red;
overflow:hidden;
}
#boxOut{
width:320px;
height:410px;
overflow:scroll;
background-color:#fff;
margin:154px auto auto 38px;
}
/*.accordian {
width: 400px;
margin: 50px auto;
}
*/
.accordian li {
list-style-type: none;
padding: 0 8px;
}
.dimension {
/* height: 400px;
*/}
.odd, .even {
font-weight: bold;
height: 27px;
padding-top: 3px;
padding-left: 10px;
border: 1px solid #d8d8d8;
background: #ececec;
color: #333;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
margin-left:6px;
margin-right:6px;
}
.logo{
width:300px;
margin:6px auto;
}
.intownLogo{
width:255px;
margin:6px auto;
}
.spaces{
margin-top:8px;
}
JS:
$(function() {
// Hide all the content except the first
//$('.accordian li:odd:gt').hide();
$('.accordian li:odd').hide();
// Add the dimension class to all the content
$('.accordian li:odd').addClass('dimension');
// Set the even links with an 'even' class
$('.accordian li:even:even').addClass('even');
// Set the odd links with a 'odd' class
$('.accordian li:even:odd').addClass('odd');
// Show the correct cursor for the links
$('.accordian li:even').css('cursor', 'pointer');
// Handle the click event
$('.accordian li:even').click(function() {
// Get the content that needs to be shown
var cur = $(this).next();
// Get the content that needs to be hidden
var old = $('.accordian li:odd:visible');
// Make sure the content that needs to be shown
// isn't already visible
if (cur.is(':visible'))
return false;
// Hide the old content
old.slideToggle(500);
// Show the new content
cur.stop().slideToggle(500);
});
});
我jQuery是noobish充其量所以虽然我已了解了它的时候,我不能编辑它不破坏它...上帝知道我用尽笑。
im有问题的部分是,使用这些标签,虽然他们工作,他们与.next()函数等工作,所以当一个标签打开,如果我点击相同的标签关闭,它doesn关闭时,只有在另一个选项卡被点击时它才会关闭。
是林与需要帮助....东西,说
“逻辑”,如果这个标签已经被打开和点击,关闭当前打开的选项卡。 让说,例如,基于上述
伪码的代码来:
if (cur.is(':visible') && cur.is(':clicked'))
cur.slideToggle();
感谢先进的帮助。
答
您可以使用.toggle()事件。这很简单 - 你将它作为参数传递。当你点击目标时,每个功能依次运行。一个简单的例子:
cur.toggle(
function() //function 1
{
cur.show();
},
function() //function 2
{
cur.hide();
}
);
的第一次点击,它运行的第一个函数,执行cur.show();
。下一次单击运行第二个函数,运行cur.hide();
。再次点击运行第一个功能,等等。你甚至可以添加更多的功能,所以你可以在第1次到第n次点击中反复使用特定的功能。
嘿超现实主义,谢谢你看这个。也许我应该把它放在那里,但是,我试过这个,这是发生了什么,如果我只是把“cur.toggle(function(){cur.show()})本身,然后它会打开,但当我点击隐藏,然后重新打开它,然后重新打开,当我完全像它那样添加它时,它不会做任何事情,它只是停留在所有标签页关闭的地方 – somdow 2012-04-10 21:26:54
必须有其他代码在这些标签上运行如果你有'cur .toggle(function(){cur.show()})'那么没有理由让tab在关闭时关闭 - 它会尝试在每次点击时显示。其他一些代码必须给它指令'.hide ()'。 – 2012-04-10 21:39:27
大家好,这就是我坚持在大声笑,就像我说的b4,我知道100%你的意思,但如果你看上面,这就是所有的代码到标签,evens和赔率被附加到标签h1 (')。我认为关键是在“$('。accordian li:even')。click(function()”,但是,我试过的是将slideToggles插入该函数并且没有任何东西。其他事件再次发生,并且没有任何事情......并且就像我说的b4,上面的代码是这些标签的唯一代码。在微网站上的所有其他内容我编码了,所以即时确认 – somdow 2012-04-10 22:08:31