一个网页内多个滑动门和菜单_菜单导航

一个网页内多个滑动门和菜单: 发布时间：2020-10-24编辑：脚本学堂

一个网页内多个滑动门和菜单同在，在一个网页内配置多个滑动门。三种不同效果，非常实用，希望对大家有帮助。

<!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>
    <FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312"  />
    <title><a href=http://www.jb200.com/jb/jquery/ target=_blank class=infotextkey>jquery</a>选项卡菜单</title>
    <script type="text/<a href=http://www.jb200.com/js/ target=_blank class=infotextkey>javascript</a>" src="/source/js/jquery1.3.2.js"></script>
    <script type="text/javascript" > 
 
	$(function(){
	    var wweya_li =$("div.tab_menu ul li");
	    wweya_li.click(function(){
		$(this).addClass("selected")            //当前<li>元素高亮
		 .siblings().removeClass("selected");  //去掉其它同辈<li>元素的高亮
            var index =  wweya_li.index(this);  // 获取当前点击的<li>元素 在 全部li元素中的索引。
		$("div.tab_box > div")   	//选取子节点。不选取子节点的话，会引起错误。如果里面还有div 
		.eq(index).show(100)   //显示 <li>元素对应的<div>元素
			.siblings().hide(); //隐藏其它几个同辈的<div>元素						}).hover(function(){
			$(this).addClass("hover");
		},function(){
			$(this).removeClass("hover");			
		})
	})
</script>
    <style type="text/css">
    *{ margin:0; padding:0;}
    body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
    .tab { width:240px;margin:50px;}
    .tab_menu { clear:both;}
    .tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;}
    .tab_menu li.hover { background:#DFDFDF;}
    .tab_menu li.selected { color:#FFF; background:#6D84B4;}
    .tab_box { clear:both; border:1px solid #898989; height:100px;}
    .hide{display:none}
    h1 { margin:80px; <a href=http://www.jb200.com/article/15092.html target=_blank class=infotextkey>line-height</a>:90px; font-size:16px; color:#999; text-align:center; border-top:1px solid #ddd;}
    </style>
    </head>
    <body>
    <div class="tab">
    <div class="tab_menu">
    <ul>
    <li class="selected">星座</li>
    <li>时尚</li>
    <li>娱乐</li>
    </ul>
    </div>
    <div class="tab_box">
    <div>双鱼座</div>
    <div class="hide">时尚潮流</div>
    <div class="hide">娱乐八卦</div>
    </div>
    <div class="tab_menu">
    <ul>
    <li class="selected">星座</li>
    <li>时尚</li>
    <li>娱乐</li>
    </ul>
    </div>
    <div class="tab_box">
    <div>双鱼座</div>
    <div class="hide">时尚潮流</div>
    <div class="hide">娱乐八卦</div>
    </div>
    </div>
    <p> </p>
    <p>可以无限 但一定要配对出现</p>
    <p> </p>
    <div class="tab_menu">
    <ul>
    <li class="selected">星座</li>
    <li>时尚</li>
    <li>娱乐</li>
    </ul>
    </div>
    <div class="tab_box">
    <div>双鱼座</div>
    <div class="hide">时尚潮流</div>
    <div class="hide">娱乐八卦</div>
    </div>
    <h1>by <a href="http://www.jb200.com" _fcksavedurl="http://www.jb200.com" target="_blank"><a href=http://www.jb200.com/jb/ target=_blank class=infotextkey>脚本</a>学习网</a></h1>
    </body>
    </html>

提示：可修改代码后再运行!

上一篇：大气漂亮的蓝色js+css二级菜单代码，适用于购物网站、企业网站等
下一篇：纯CSS技术实现的二级网站菜单

与一个网页内多个滑动门和菜单有关的文章

本文标题：一个网页内多个滑动门和菜单
本页链接：http://www.jb200.com/tx/71.html

浏览排行

栏目分类

热点文章

一个网页内多个滑动门和菜单