<!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. 正对开源工作的源码管理web （ssh协议管理） 本地如何使用SourceTree 管理

    入口: 如何产生公钥与私钥 ,以及开源中国 gitweb sshkey 的管理web 地址: 点击 “头像” ,然后再头像下面的列表选择 “ SSH Key Settings” . 接下来,完成跟着步 ...

  2. 【BZOJ 1049】 1049: [HAOI2006]数字序列 （LIS+动态规划）

    1049: [HAOI2006]数字序列 Description 现在我们有一个长度为n的整数序列A.但是它太不好看了,于是我们希望把它变成一个单调严格上升的序列.但是不希望改变过多的数,也不希望改变 ...

  3. [BZOJ4004][JLOI2015]装备购买(贪心+线性基)

    求最小权极大线性无关组. 先将所有向量按权值排序,从小到大依次判断,若能被前面已选向量线性表出则不选,这样一定最优. 据说是用拟阵来证明,但感性理解一下感觉比较显然,首先这样个数一定是最多的,其次对于 ...

  4. hdu 1251 (Trie水题）

    统计难题 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131070/65535 K (Java/Others)Total Submi ...

  5. [CODE FESTIVAL 2016]Distance Pairs

    题意:有一个未知的边权为$1$的图,给定所有点到$1$的最短路$a_i$和到$2$的最短路$b_i$,问是否存在这样的图,如果存在,问图中最少有多少条边 先考虑$a_i$,有$a_1=0,a_i\ne ...

  6. 【动态规划】Gym - 101201A - Alphabet

    题意:一个字符串被定义为“alphabetical”,当且仅当它能够删除一些字符,变成“ab...yz”,给你一个只由小写字母组成的字符串,问你最少插入几个字母,使它变成“alphabetical”的 ...

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

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

  8. Codeforces Round #345 (Div. 2) A. Joysticks dp

    A. Joysticks 题目连接: http://www.codeforces.com/contest/651/problem/A Description Friends are going to ...

  9. [典型漏洞分享]结合YS业务分析使用oauth协议的风险

    结合YS业务分析oauth协议风险 问题描述: YS 使用QQ互联的openAPI实现QQ登录YS的功能,使用该功能需要在腾讯注册登录时的回调地址,根据oauth协议,用户的code或者access_ ...

  10. Describe in brief Databases and SQL Server Databases Architecture.

    Databases- A database is a structured collection of data.- Database can be thought as simple data fi ...