Jquery滑动门实现
<!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滑动门实现的更多相关文章
- JS滑动门,JQuery滑动门
<a href="#" id="one1" onmouseover="setTab('one',1,2)" class="h ...
- [Jquery]滑动门效果
$(function(){ var $box=$("#box"); var $img=$box.find("img"); var imgWid ...
- jquery插件之tab标签页或滑动门
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...
- 代码简洁的滑动门(tab)jquery插件
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...
- 轮播图插件 SuperSlide2.1滑动门jQuery插件
http://down.admin5.com/demo/code_pop/18/562/ SuperSlide2.1滑动门jQuery插件
- asp.net实现数据库版动态网页滑动门
前端: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="滑动门.aspx.c ...
- slidedoor滑动门特效
slidedoor滑动门特效 exportWidth:暴露门的宽度 width imagesWidth:单张图片的宽度width 每道门每次偏移量 translate=imagesWidth-expo ...
- FlexSlider jQuery滑动切换插件 参数
demo:http://www.sucaihuo.com/jquery/0/6/demo/ FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所 ...
- Javascript学习笔记2.2 Javascript与DOM选项卡(滑动门)案例详解
学习了DOM的知识,今天开始做些练习,想到了一个网页滑动门的特效,见下图: 1.通过建立索引实现 <!doctype html> <html> <head> < ...
随机推荐
- 洛谷P3216 [HNOI2011] 数学作业 [矩阵加速,数论]
题目传送门 数学作业 题目描述 小 C 数学成绩优异,于是老师给小 C 留了一道非常难的数学作业题: 给定正整数 N和 M,要求计算 Concatenate (1 .. N)Mod M 的值,其中 C ...
- Python进阶:@property 动态属性
Python进阶:@property 动态属性 Python 动态属性的概念可能会被面试问到,在项目当中也非常实用,但是在一般的编程教程中不会提到,可以进修一下. 先看一个简单的例子.创建一个 Stu ...
- codevs1033 蚯蚓的游戏问题 裸最小费用最大流,注意要拆点
因为蚯蚓走过的路径不能重合,所以把每个点拆成两个点,容量赋为1,保证不会走过相同的点,再加超级源点(程序中为1)和一个辅助点(程序中为2)容量赋为k来控制蚯蚓的数量,最后汇集到一个超级汇点上.做一遍最 ...
- BZOJ 1229 [USACO2008 Nov]toy 玩具(三分+贪心)
[题木链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1229 [题目大意] 每天对玩具都有一定的需求ni,每天可以花f价值每条购买玩具, 当天 ...
- 【计算几何】【凸包】Gym - 101164H - Pub crawl
平面上n个点,点之间沿直线走,规划一条路线,每次只能往左半平面的点走,走过最多的点. 显然所有的点都能走过. n^2的暴力显然是每次找左边与其所形成夹角最小的点,但这样过不了(卡常数?). 或者每轮不 ...
- [HNOI/AHOI2017]影魔
[HNOI/AHOI2017]影魔 题目大意: 有一排\(n(n\le2\times10^5)\)个数\(k_{1\sim n}\).对于点对\((i,j)\),若不存在\(k_s(i<s< ...
- UNIX域套接字连接mysql
用户可以在配置文件中指定套接字文件的路径,如--socket=/data/mysql/mysql.sock [root@localhost ~]# mysql -uroot -p123456 -S / ...
- Linux下KVM的图形界面管理工具(WebVirtMgr)(Web版)
WebVirtMgr面板 截图 介绍 WebVirtMgr是一个基于libvirt的Web界面,用于管理虚拟机.它允许您创建和配置新域,并调整域的资源分配.VNC查看器为来宾域提供完整的图形控制台.K ...
- 我告诉你MSDN
https://msdn.itellyou.cn/ 微软的软件,系统,官方下载
- s3c2440对nandflash的操作
转:http://blog.csdn.net/zhaocj/article/details/5795254 nandflash在对大容量的数据存储中发挥着重要的作用.相对于norflash,它具有一些 ...