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内容隐藏。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<style type="text/css">
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>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script language="javascript">
$(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>
<ul id="topnav">
<li class="click">111
<span>111-1</span>
<span>111-2</span>
</li>
<li class="click">222
<span>222-1</span>
<span>222-2</span>
</li>
<li class="click">333
<span>333-1</span>
<span>333-2</span>
</li>
</ul>
</body>
</html>
测试：
初始化
点击
再次点击又变为初始化效果~~~
2015-11-11 · 做真实的自己 用良心做教育
千锋教育
原理：使所有的图片隐藏然后控制对应的图片显示。
初始化：现将所有的图片隐藏控制第一张显示。（可通过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");//数字对应的图片显示
});
这个，最好把你的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代码贴出来吧。
