jQuery实现多个li点击切换和显示隐藏

Posted 2023-05-04

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery实现多个li点击切换和显示隐藏相关的知识，希望对你有一定的参考价值。

我写了一段代码能实现切换，但是点击时不能显示隐藏
$(function()

$("#topnav li").each(
$("#topnav li").bind("click",function()
$(this).siblings().removeClass("click").children("span").css("display","none");
$(this).addClass("click").children("span").css("display","block");
//$(this).siblings().removeClass("click").children("span").slideToggle();
//$(this).addClass("click").children("span").slideToggle();

)
);

);
<ul id="topnav">
<li>
<a href="#" >角色</a>
<span>
管理员
</span>
<span>
用户
</span>
</li>
<li>
<a href="#">语言</a>
<span>
<a href="#" id="zh_CN" >简体中文</a>
<a href="#" id="en_US" >美国英语</a>
</span>
</li>
<li>
<a href="#">换肤</a>
<span>
蓝色
</span>
<span>
紫色
</span>
<span>
红色
</span>
</li>
</ul>

1、新建html文件。

2、引入jquery.min.js文件。

3、创建HTML内容。

4、预览效果如图。

5、用jquery创建点击事件，点击隐藏按钮，p内容隐藏。

6、用jquery创建点击事件，点击显示按钮，p内容显示。

7、预览如图当点击隐藏按钮，p内容隐藏。

参考技术A

<!DOCTYPE html>

<html>

<head>

li line-height:200%; background:#eee;

.click background:#000; color:#fff;

.nav_title li display: block; float: left; height: 32px; line-height: 32px; border: 1px solid gray; margin-left: -1px;

.nav_under display: none; width: 100px; height: 100px; border: solid 1px red;

</style>

$(document).ready(function()

$("#topnav li").each(function()

$("#topnav li").bind("click",function()

//$(this).children("span").css("display","none").parent().siblings().removeClass("click");

$(this).children("span").toggle().parent().siblings().toggleClass("click");

)

);

</script>

</head>

<body>

<li class="click">111

</li>

<li class="click">222

</li>

<li class="click">333

</li>

</ul>

</body>

</html>

测试：

初始化

点击

再次点击又变为初始化效果~~~

参考技术B

原理：使所有的图片隐藏然后控制对应的图片显示。
初始化：现将所有的图片隐藏控制第一张显示。（可通过css实现）。
过程：当鼠标点击数字的时候，先控制所有的图片全部隐藏，控制数字对应的图片显示即可。

实现方法：

<ul id="img">
<li><img src="1.jpg" /></li>
<li><img src="2.jpg" /></li>
<li><img src="3.jpg" /></li>
<li><img src="4.jpg" /></li>
</ul>
<ul id="num">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script type="text/javascript">
$("#img li").css("display","none");//初始化隐藏全部的图片
$("#img li:eq(0)").css("display","block");//只显示第一个图片
$("#num li").click(function()//当鼠标经过数字
$("#img li").css("display","none");//隐藏全部的图片
$("#img li:eq("+$(this).index()+")").css("display","block");//数字对应的图片显示
);

参考技术C

这个，最好把你的html代码也贴出来吧。

$(function()
    $("#topnav li").each(
        $(this).bind("click",function()
            $(this).siblings().removeClass("click").children("span").css("display" ,"none");
    $(this).addClass("click").children("span").css("display","block");
    )
);
);

还是把你的html代码贴出来吧。