gpt4 book ai didi

javascript - 简单的 JS 过滤器(第一个选项卡处于事件状态 + 淡入淡出效果)

转载 作者:行者123 更新时间:2023-11-29 21:47:08 25 4
gpt4 key购买 nike

我有一个非常简单的内容过滤器,但我需要两件小事来改进它:

  1. 如何让第一个选项卡默认处于事件状态?所以我没有展示所有内容。

  2. 有没有一种方法可以在单击其中一个选项卡时添加简单的淡入/淡出效果?

这是我的 HTMLJS:

$(document).ready(function(){  
var filters = {};
//when a link in the filters div is clicked...
$('#filters a').click(function(e){
e.preventDefault();
filters[$(this).parent().attr('class')] = $(this).attr('id');
var show = $('#content ul li').filter(function(){
for(k in filters)
if(
filters.hasOwnProperty(k) &&
!$(this).hasClass(filters[k])
)
return false;
return true;
});
show.show();
$('#content ul li').not(show).hide();
$('pre:first').html(JSON.stringify(filters));
});
});
<div id='filters'>
<p class="f1" >
<a href='#' id='mon'>Monday</a>
<a href='#' id='tue'>Tuesday</a>
<a href='#' id='wed'>Wednesday</a>
<a href='#' id='thur'>Thursday</a>
<a href='#' id='allitems'>All</a>
</p>
</div>


<div id='content'>
<ul>
<li class='mon allitems'>monday content goes here</li>
<li class='tue allitems'>tuesday content goes here</li>
<li class='wed allitems'>wednesday content goes here</li>
<li class='thur allitems'>thursdaycontent goes here</li>
</ul>
</div>

最佳答案

第一个答案:您可以使用 $('#mon').click(); 调用第一个链接的点击事件,这样您将触发点击事件并且函数将运行。

第二个答案:jQuery 有 fadeIn() fadeOut() 函数。使用它们代替 show()

http://api.jquery.com/fadein/

http://api.jquery.com/fadeout/

Jsfiddle:https://jsfiddle.net/py3ezk9y/

关于javascript - 简单的 JS 过滤器(第一个选项卡处于事件状态 + 淡入淡出效果),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30704970/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com