列表之间的切换

最新推荐文章于 2024-08-09 06:13:01 发布

longnihao

最新推荐文章于 2024-08-09 06:13:01 发布

阅读量345

点赞数

分类专栏： jquery mouseout hover 文章标签： function generator xhtml c class html

本文链接：https://blog.csdn.net/longnihao/article/details/7219547

版权

jquery mouseout hover 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <script type="text/javascript" src = "js/jquery_1.4.2.js"></script>
  <script type="text/javascript">
  <!--
	$(function(){
			
		 $("li").each(function(){
			$("#ul").data("c",$("li.c"));
			$("#ul").data("click",$("li.click")); 
			$(this).hover(
				function(event){  
					$("#ul").data("c").removeClass("c"); 
					$("#ul").data("c",$(this));
					$(this).addClass("c");
				}
				,function(event){ 
					$("#ul").data("c").removeClass("c"); 
				}
			).click(function(){
				 $("#ul").data("click").removeClass("click").removeClass("c");
				 $(this).addClass("click").addClass("c"); 
				 $("#ul").data("click",$(this)); 
			}); 
		 });  
		
		 $("#ul").hover(function(){
			 },function(){
			$("#ul").data("click").addClass("c");
		 });
		 // 为什么为mouseout时候不可以呢？
		 //
		 //$("#ul").mouseout(function(){ 
		 //	$("#ul").data("click").addClass("c");
		 //});
		 //
	});
  //-->
  </script>
  
   <style type="text/css">
	 .c{
		background-color: red;
	 }

	 .o{
		background-color: white;
	 }

	 div#ul{
		background-color: gray;
	 }
   </style>
 </head>

 <body>
	<div >
	 <ul id = "ul">
		<li class="c click">first</li>
		<li>first</li>
		<li>first</li>
		<li>first</li>
		<li>first</li>
		<li>first</li>
		<li>first</li>
		<li>first</li>
	 </ul> 
	</div>
	 
 </body>
</html>

longnihao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
列表之间的切换

new document <!-- $(function(){ $("li").each(function(){ $("#ul").data("c",$("li.c")); $("#ul").data("click",$("li.click")); $(this).hover( function(event){
复制链接

扫一扫

专栏目录