gpt4 book ai didi

jquery - 淡入/淡出 LI 并调整容器的高度

转载 作者:太空宇宙 更新时间:2023-11-04 13:35:52 25 4
gpt4 key购买 nike

我有以下标记(我在代码笔中创建了一个 example):

<div class="slider">
<ul>
<li id="S1">
<div class="txt"><p>First slogan</p></div>
<div class="img"><img src="http://placehold.it/800x180" /></div>
</li>
<li id="S2">
<div class="txt"><p>First slogan</p></div>
<div class="img"><img src="http://placehold.it/800x280" /></div>
</li>
</ul>
<a href="#S1">1</a>
<a href="#S2">2</a>
</div>

我想要以下内容:

  1. 最初只有第一个 LI 元素可见。

  2. 当点击 A 标签时,如果其 href 值不是可见 LI 的 ID,则:

    • 淡出当前 LI;
    • 将 slider 容器 DIV 高度调整为要显示的 LI 的高度。
    • 淡入 LI 确实会显示。

我如何使用 JQuery 做到这一点?

谢谢你,米格尔

最佳答案

我相信这个交换函数应该可以解决问题

首先将currentStory类添加到第一个LI和A标签<li id="S1" class="currentStory"> <a href="#S1" class="currentStory" id="S1">1</a>

确保链接的 ID 与其 <li> 相同这个工作的元素

<a href="#S1" class="currentStory" id="S1">1</a> <a href="#S2" id="S2">2</a>

$(document).ready(function() {

function swapStory(storyName){
$('.slider li.currentStory').hide();
$('.slider li.currentStory').removeClass('currentStory');
$('.slider [id = ' + storyName + ']').addClass('currentStory');
$('.slider [id = ' + storyName + ']').fadeIn("slow");
}

$(function() {

$('.slider li:not(".currentStory")').hide();
$('.slider a').click(function(){
swapStory($(this).attr("id"));
return(false);
});
});

});

希望这就是您要找的。

关于jquery - 淡入/淡出 LI 并调整容器的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23048949/

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