<!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. 从零开始做SSH项目（一）

    1.数据库脚本 用户表 CREATE TABLE `ybl`.`userinfo`( `id` INT NOT NULL AUTO_INCREMENT, `email` ) NOT NULL, `id ...

  2. 洛谷P2127 序列排序 [贪心]

    题目传送门 题目描述 小C有一个N个数的整数序列,这个序列的中的数两两不同.小C每次可以交换序列中的任意两个数,代价为这两个数之和.小C希望将整个序列升序排序,问小C需要的最小代价是多少? 输入输出格 ...

  3. Poj1151&HDU1542 Atlantis（扫描线+线段树）

    题意 给定\(n​\)个矩形\((x_1,y_1,x_2,y_2)​\),求这\(n​\)个矩形的面积并 题解 扫描线裸题,可以不用线段树维护,\(O(n^2)\)是允许的. #include < ...

  4. 第4天：Ansible模块

    Ansible对远程服务器的实际操作实际是通过模块完成的,其工作原理如下: 1)将模块拷贝到远程服务器 2)执行模块定义的操做,完成对服务器的修改 3)在远程服务器中删除模块 需要说明的是,Ansib ...

  5. Flask实战第62天：帖子详情页布局

    在templates/front/下创建详情页面front_pdetail.html 编辑front.views.py创建详情页的视图函数 from flask import abort ... @b ...

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

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

  7. Linux下屏幕截图

    Ubuntu使用教程——截屏 http://www.linuxidc.com/Linux/2014-02/96827.htm Ubuntu下使用(xfce截屏)及GNOME下一个好用的截屏工具 htt ...

  8. poj 3132

    Sum of Different Primes Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 3360   Accepted ...

  9. 对Webservice的理解

    eb   Service使用的是   SOAP   (Simple   Object   Access   Protocol)协议 soap协议只是用来封装消息用的.封装后的消息你可以通过各种已有的协 ...

  10. 【FFT】OpenJ_POJ - C17H - Reverse K-th Problem

    对每个位置i处理出以其为结尾,且比a(i)大的数有j个的前缀个数,记成一个数组l:同理,处理出以其为开头,且比a(i)大的数有j个的后缀的个数,记成一个数组r. 整个序列中比a(i)大的数的个数的数组 ...