<!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>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title></title>

<style>

 *{ 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}

</style>

<!--   引入jQuery -->

 <script src="../../scripts/jquery.js" type="text/javascript"></script>

<script type="text/javascript" >

	$(function(){

	    var $div_li =$("div.tab_menu ul li");

	    $div_li.click(function(){

			$(this).addClass("selected")            //当前<li>元素高亮

				   .siblings().removeClass("selected");  //去掉其他同辈<li>元素的高亮

            var index =  $div_li.index(this);  // 获取当前点击的<li>元素 在 所有li元素中的索引。

$("div.tab_box > div")   	//选取子节点。不选取子节点的话。会引起错误。假设里面还有div

					.eq(index).show()   //显示 <li>元素相应的<div>元素

					.siblings().hide(); //隐藏其他几个同辈的<div>元素

		}).hover(function(){			//加入光标滑入滑出效果

			$(this).addClass("hover");

		},function(){

			$(this).removeClass("hover");

		})

	})

</script>

</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>

</body>

</html>

Jquery滑动门实现的更多相关文章

  1. JS滑动门,JQuery滑动门

    <a href="#" id="one1" onmouseover="setTab('one',1,2)" class="h ...

  2. [Jquery]滑动门效果

    $(function(){    var $box=$("#box");    var $img=$box.find("img");    var imgWid ...

  3. jquery插件之tab标签页或滑动门

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...

  4. 代码简洁的滑动门（tab）jquery插件

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...

  5. 轮播图插件 SuperSlide2.1滑动门jQuery插件

    http://down.admin5.com/demo/code_pop/18/562/ SuperSlide2.1滑动门jQuery插件

  6. asp.net实现数据库版动态网页滑动门

    前端: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="滑动门.aspx.c ...

  7. slidedoor滑动门特效

    slidedoor滑动门特效 exportWidth:暴露门的宽度 width imagesWidth:单张图片的宽度width 每道门每次偏移量 translate=imagesWidth-expo ...

  8. FlexSlider jQuery滑动切换插件 参数

    demo:http://www.sucaihuo.com/jquery/0/6/demo/ FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所 ...

  9. Javascript学习笔记2.2 Javascript与DOM选项卡（滑动门）案例详解

    学习了DOM的知识,今天开始做些练习,想到了一个网页滑动门的特效,见下图: 1.通过建立索引实现 <!doctype html> <html> <head> < ...

随机推荐

  1. HDU 4888 Redraw Beautiful Drawings

    网络流. $s$向每一个$r[i]$连边,容量为$r[i]$. 每一个$r[i]$向每一个$c[j]$连边,容量为$k$. 每一个$c[j]$向$t$连边容量为$c[j]$. 跑最大流,中间每一条边上 ...

  2. 使用0填充string（构造类似‘00001’的字符串）

    今天在对视频进行爬取的时候,发现url最后是000001,然后是000002,依次增加,而且每一个url请求只能得到一个分段了的视频,这种情况下构造url就成了一个问题. python有一个函数可以处 ...

  3. python之面向对象编程二

    类的成员 类的成员可以分为三大类:字段.方法.属性. 字段:普通字段.静态字段. 方法:普通方法.类方法.静态方法 属性:普通属性. 注:所有成员中,只有普通字段的内容保存对象中,即:根据此类创建了多 ...

  4. MC资源整理

    MC模拟简介 蒙特卡罗模拟,因摩纳哥著名的赌场而得名.它能够帮助人们从数学上表述物理.化学.工程.经济学以及环境动力学中一些非常复杂的相互作用. 蒙特卡罗(Monte Carlo)方法,又称随机抽样或 ...

  5. Python开发基础-Day19继承组合应用、对象序列化和反序列化，选课系统综合示例

    继承+组合应用示例 class Date: #定义时间类,包含姓名.年.月.日,用于返回生日 def __init__(self,name,year,mon,day): self.name = nam ...

  6. Flip Game II -- LeetCode

    You are playing the following Flip Game with your friend: Given a string that contains only these tw ...

  7. 【状压dp】Islands and Bridges

    Islands and Bridges Time Limit: 4000MS   Memory Limit: 65536K Total Submissions: 11034   Accepted: 2 ...

  8. 【状压dp】Most Powerful

    [ZOJ3471]Most Powerful Time Limit: 2 Seconds      Memory Limit: 65536 KB Recently, researchers on Ma ...

  9. 【构造】Gym - 100781B - Bell Ringing

    根据n-1推n的情况,让n从每一个的最右走到最左,再从下一个最左走到最右,如此往复即可. #include<cstdio> using namespace std; int n,a[500 ...

  10. bzoj 1433: [ZJOI2009]假期的宿舍

    1433: [ZJOI2009]假期的宿舍 Description Input Output Sample Input 1 3 1 1 0 0 1 0 0 1 1 1 0 0 1 0 0 Sample ...