<!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. 洛谷P2556 [AHOI2002] 黑白图像压缩 [模拟]

    题目传送门 黑白图像压缩 题目描述 选修基础生物基因学的时候, 小可可在家里做了一次图像学试验. 她知道:整个图像其实就是若干个图像点(称作像素)的序列,假定序列中像素的个数总是 8 的倍数, 于是每 ...

  2. Spring源码阅读入门指引

    本文大概的对IOC和AOP进行了解,入门先到这一点便已经有了大概的印象了,详细内容请看下文. AD: 本文说明2点: 1.阅读源码的入口在哪里? 2.入门前必备知识了解:IOC和AOP 一.我们从哪里 ...

  3. cogs 2039. 树的统计

    2039. 树的统计 ★★   输入文件:counttree.in   输出文件:counttree.out   简单对比时间限制:1 s   内存限制:128 MB [题目描述] 关于树的统计问题有 ...

  4. poj 3464(Trie)Approximations

    Approximations Time Limit: 2000MS   Memory Limit: 131072K Total Submissions: 419   Accepted: 23 Desc ...

  5. AGC 022 C - Remainder Game

    题面在这里! 显然权值是 2^i 这种的话就是要你贪心,高位能不选就不选. 并且如果 % x 之后再去 % 一个>=x的数是没有用的,所以我们可以把操作的k看成单调递减序列. 这样的话就是一个有 ...

  6. [Codeforces-div.1 24D] Broken robots

    [Codeforces-div.1 24D] Broken robots 试题分析 显然设\(f_{i,j}\)为到\((i,j)\)的期望步数,将转移表达式列出来. 首先自己跟自己的项消掉. 然后规 ...

  7. Java编程思想学习(一)----对象导论中多态的理解

    1.1抽象过程 1)万物皆对象. 2)程序是对象的集合,他们通过发送消息来告知彼此所要求做的. 3)每个对象都有自己的由其他对象所构成的存储. 4)每个对象都拥有其类型. 5)某一特定类型的所有对象都 ...

  8. 找出N个数中最小的k个数问题(复杂度O(N*logk))

    这是一个经典的算法题,下面给出的算法都在给定的数组基础上进行,好处时不用分配新的空间,坏处是会破坏原有的数组,可以自己分配新的空间以避免对原有数组的破坏. 思路一 先直接排序,再取排序后数据的前k个数 ...

  9. Ubuntu 16.04搭建OpenVPN服务器以及客户端的使用

    说明:启动时注意用户权限,比如root用户启动. Ubuntu: 服务器环境:Ubuntu 16.04 64位系统 内网IP:10.143.80.116 外网IP:203.195.1.2 OpenVP ...

  10. ajax跨域的解决方案

    前言 公司要做一个活动页面,在其过程中发现所有的接口,ajax请求跨域.这里对跨域做个简单介绍以及提供几种解决办法. 由于浏览器实现的同源策略的限制,XmlHttpRequest只允许请求当前源(域名 ...