<!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 6280 From Tree to Graph（2018 湘潭邀请 E题，树的返祖边）

    其实打返祖边就相当于$x$到祖先这一段点(不包括两端)答案都要减$1$. 然后每个点最多减$1$次$1$. #include <bits/stdc++.h> using namespace ...

  2. WAR/EAR 概念

    In J2EE application, modules are packaged as EAR, JAR and WAR based on their functionality JAR: EJB ...

  3. 【转载】Virtual Box下配置Host-Only联网方式详解

    其实网络这类相关的文章很多,我只是想结合自己的实际情况,把我的经验写下来,给那些需要的人们吧. 主机:windows 7 虚拟机:CentOS6.0 VirtualBox:4.2.0 虚拟机在安装好之 ...

  4. Token-Pasting Operator (##) and Stringizing Operator (#)

    Token-Pasting Operator (##)The double-number-sign or “token-pasting” operator (##), which is sometim ...

  5. a标签点击后页面显示个false

    最近遇到个问题,在html页面中使用a标签,在href属性中调用一个function,而function中返回的是return false.结果页面被跳转了,然后页面上显示一个false. 一看到这个 ...

  6. ocx控件打印之基础篇

      Visual C++6.0是开发Windows应用程序的强大工具,但是要通过它实现程序的打印功能,一直是初学者的一个难点,经常有朋友询问如何在VC中实现打印功能,他们往往感到在MFC提供的框架内实 ...

  7. websocket+golang聊天室

    原文地址: http://www.niu12.com/article/3 websocket+golang聊天室 main.go和index.html放在同一目录下 main.go package m ...

  8. Javascript中的对象（二）

    Javascript是一种基于原型的对象语言,而不是我们比较熟悉的,像C#语言基于类的面向对象的语言.在前一篇文章中,我们已经介绍了Javascript中对象定义的创建.接下来我们来介绍一下Javas ...

  9. @查看MySQL版本的方法

    1.在终端下:mysql -V. [root@localhost bin]# mysql -V; mysql Ver 14.14 Distrib 5.6.21, for Linux (x86_64) ...

  10. iOS：Reachability网络监听

    iOS利用Reachability确认网络环境3G/WIFI 开发Web等网络应用程序的时候,需要确认网络环境,连接情况等信息.如果没有处理它们,是不会通过Apple的审查的,一般情况下,可以把网络监 ...