根据所选选项调用jquery函数
根据所选选项调用jquery函数
提问于 2011-06-16 03:28:10
我有一个包含不同类别的选项卡菜单：
<ul class="feed-tabs">
<li>category1</li>
<li>category2</li>
<li>category3</li>
<li>category4</li>
<li>category5</li>
</ul>当我单击选项卡时，它会显示相应的div：
<div id="feeds-container">
<div class="feed-category1">
<div><p >cat1-1</p></div>
<div><p >cat1-2</p></div>
<div><p >cat1-3</p></div>
<div><p >cat1-4</p></div>
</div>
<div class="feed-category2">
<div><p >cat2-1</p></div>
<div><p >cat2-2</p></div>
<div><p >cat2-3</p></div>
<div><p >cat2-4</p></div>
</div>
<div class="feed-category3">
<div><p >cat3-1</p></div>
<div><p >cat3-2</p></div>
<div><p >cat3-3</p></div>
<div><p >cat3-4</p></div>
</div>
<div class="feed-category4">
<div><p >cat4-1</p></div>
<div><p >cat4-2</p></div>
<div><p >cat4-3</p></div>
<div><p >cat4-4</p></div>
</div>
</div>在div中，我想使用这个函数：
<script type="text/javascript">
$(document).ready(function(){
var first = 0;
var speed = 400;
var pause = 3500;
function removeFirst(){
first = $('div.feed-category1 div:first').html();
$('div.feed-category1 div:first')
.animate({opacity: 0}, speed)
.fadeOut('100', function() {$(this).remove();});
addLast(first);
}
function addLast(first){
last = '<div style="display:none">'+first+'</div>';
$('div.feed-category1').append(last)
$('div.feed-category1 div:last')
.animate({opacity: 1}, speed)
.fadeIn('1000')
}
interval = setInterval(removeFirst, pause);
});
</script>它是一个新闻报价器。现在它只能与“feed-category1 1”一起工作，因为它被硬编码在jquery函数中。
我怎样才能使它适用于所有类别。
示例代码如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="http://static.cdncast.com/anyblog/frontpagev2/js/jquery.tools.min.js"></script>
<style>
ul.feed-tabs { list-style:none; }
ul.feed-tabs li { float: left; text-decoration: none; padding: 0 20px; cursor: pointer; }
hr { clear:both; }
</style>
<script type="text/javascript">
$(function() {
$("ul.feed-tabs").tabs("#feeds-container > div", { effect: 'fade', fadeInSpeed : 700, current : 'current', tabs : 'li' });
});
$(document).ready(function(){
var first = 0;
var speed = 400;
var pause = 3500;
function removeFirst(){
first = $('div.feed-category1 div:first').html();
$('div.feed-category1 div:first')
.animate({opacity: 0}, speed)
.fadeOut('100', function() {$(this).remove();});
addLast(first);
}
function addLast(first){
last = '<div style="display:none">'+first+'</div>';
$('div.feed-category1').append(last)
$('div.feed-category1 div:last')
.animate({opacity: 1}, speed)
.fadeIn('1000')
}
interval = setInterval(removeFirst, pause);
});
</script>
</head>
<body>
<div id="header">
<ul class="feed-tabs">
<li>category1</li>
<li>category2</li>
<li>category3</li>
<li>category4</li>
<li>category5</li>
</ul>
</div>
<hr>
<div id="feeds-container">
<div class="feed-category1">
<div><p >cat1-1</p></div>
<div><p >cat1-2</p></div>
<div><p >cat1-3</p></div>
<div><p >cat1-4</p></div>
</div>
<div class="feed-category2">
<div><p >cat2-1</p></div>
<div><p >cat2-2</p></div>
<div><p >cat2-3</p></div>
<div><p >cat2-4</p></div>
</div>
<div class="feed-category3">
<div><p >cat3-1</p></div>
<div><p >cat3-2</p></div>
<div><p >cat3-3</p></div>
<div><p >cat3-4</p></div>
</div>
<div class="feed-category4">
<div><p >cat4-1</p></div>
<div><p >cat4-2</p></div>
<div><p >cat4-3</p></div>
<div><p >cat4-4</p></div>
</div>
</div>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2011-06-16 03:48:16
看看这个：
http://jsfiddle.net/dgH3S/
我将removeFirst修改为下面的代码，并完全删除了其他方法。诀窍是我直接在#feeds-container中遍历所有的div，并使用this分别针对每个use。我所做的另一个修改是简单地移动元素，而不是每次删除它并创建一个新的元素。
function removeFirst() {
$("#feeds-container > div").each(function() {
first = $(this).find('div:first').animate({
opacity: 0
}, speed).fadeOut('100', function() {
$(this).appendTo($(this).parent()).animate({
opacity: 1
}, speed).fadeIn('1000');
});
});
}或者，为了获得更好的性能，您可能希望只针对活动选项卡，而不是动画所有选项卡，即使它们没有显示。我对这个库不是很了解，无法告诉你如何找出哪个是活动的(可能只能使用not(":hidden"))。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6363155
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号