我想要实现的是一个带有一些单独div的链接列表。
目前,淡入淡出正在工作但是“跳跃点击”,<ul id="links">
和#description
中的有效状态无效。
你能帮帮我吗?
这是我的例子:
答案 0 :(得分:0)
答案 1 :(得分:0)
H,我建议你这样做。
还从描述更改为类,因为理想代码每页需要唯一ID
http://jsfiddle.net/mdamC/104/
HTML
<ul id="links">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul><br/><br/>
<div id="description">
<ul class="descriptions">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<ul class="descriptions">
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>2</li>
</ul>
<ul class="descriptions">
<li>3</li>
<li>3</li>
<li>3</li>
<li>3</li>
<li>3</li>
</ul>
<ul class="descriptions">
<li>4</li>
<li>4</li>
<li>4</li>
<li>4</li>
<li>4</li>
</ul>
<ul class="descriptions">
<li>5</li>
<li>5</li>
<li>5</li>
<li>5</li>
<li>5</li>
</ul></div>
CSS
.active{color:red}
#description{position:relative}
.descriptions{position:absolute; top:0px;}
JS
$("ul#links li").unbind().bind('click', function(e) {
if (e)
e.preventDefault();
$(this).toggleClass('active');
$("ul.descriptions").fadeOut();
var index = $(this).index();;
$("ul.descriptions").eq(index).fadeIn();
if (!e) e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}, function(e) {
$("ul.descriptions").stop().fadeOut();
});
$("ul.descriptions").hide();
if ($(this).next().is(':hidden')) {
$(this).next().removeClass('active');
}
$('ul#links li').click(function(e) {
e.preventDefault();
$('ul#links li').removeClass('active');
$(this).addClass('active');
});