jquery悬停tab
<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_box { clear:both; border:1px solid #898989; height:100px;}
.hide{display:none}
</style>
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
var $div_li =$("div.tab_menu ul li");
$div_li.hover(function(){
$(this).addClass("hover") //当前<li>元素高亮
.siblings().removeClass("hover"); //去掉其它同辈<li>元素的高亮
var index = $div_li.index(this); // 获取当前点击的<li>元素 在 全部li元素中的索引。
$("div.tab_box > div") //选取子节点。不选取子节点的话,会引起错误。如果里面还有div
.eq(index).show() //显示 <li>元素对应的<div>元素
.siblings().hide(); //隐藏其它几个同辈的<div>元素
})
})
//]]>
</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>
jquery悬停tab的更多相关文章
- jquery实现tab切换完整代码
代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- jquery实现tab页切换显示div
1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &q ...
- js和jquery实现tab选项卡
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 打造简易可扩展的jQuery/CSS3 Tab菜单
原文:打造简易可扩展的jQuery/CSS3 Tab菜单 今天我们利用jQuery和CSS3来打造一款简易而且扩展性强的Tab菜单,这款Tab菜单在切换时也有滑块的效果,先来看看效果图: 由与Tab菜 ...
- JQuery实现tab切换
JQuery实现tab切换: (jquery需要自己添加) <!DOCTYPE html> <html lang="en"> <head> &l ...
- 自写Jquery插件 Tab
原创文章,转载请注明出处,谢谢!https://www.cnblogs.com/GaoAnLee/p/9067017.html 每每看到别人写的Jquery插件,自己也试着学习尝试,终有结果,废话不多 ...
- 基于jQuery悬停图片变色放大特效
分享一款基于jQuery悬停图片变色放大特效是一款响应式鼠标悬停图片放大效果代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div style="width ...
- 基于jQuery悬停弹出遮罩显示按钮代码
今天给大家分享一款基于jQuery悬停弹出遮罩显示按钮代码.这是是一款当鼠标悬停在图片上后,会出现一系列的按钮,文字等弹性动画效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: ...
- 使用jQuery开发tab选项卡插件(可以右键关闭多个标签)
在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...
随机推荐
- java下udp的DatagramSocket 发送与接收
发送 package cn.stat.p4.ipdemo; import java.io.BufferedReader; import java.io.IOException; import java ...
- sublime text3 安装package control
20141104日更新的安装代码为 import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c6 ...
- C++得到最大的int值
要得到最大的int值: 1.利用(unsigned int)-1,这样得到的就是unsigned int表示的最大值. 2.int值只是比unsigned int多一位符号位,所以对(unsigned ...
- proxifier 注册码
https://www.proxifier.com/index.htm L6Z8A-XY2J4-BTZ3P-ZZ7DF-A2Q9C(Portable Edition) 5EZ8G-C3WL5-B56Y ...
- Activiti 使用自己的身份认证服务
Activiti 中内置了用户和组管理的服务,由identityService 提供调用接口,默认在spring配置中如下: <bean id="identityService&quo ...
- 【Xamarin 开发 IOS --IOS 页面导航概念Segue】
Storyboard里面的几种Segue区别及视图的切换:push,modal,popover,replace和custom 一.视图切换类型介绍在storyboard中,segue有几种不同的类型, ...
- python编程之处理GB级的大型文件
一般我们采取分块处理,一次处理固定大小的块. def read_in_chunks(file_obj,chunk_size): """Lazy function (gen ...
- 【转】Android ListView长按事件触发点击事件
原文网址:http://blog.csdn.net/twlkyao/article/details/17301609 算法在实现ListView的onItemLongClickListener的时候, ...
- python在一个列表中查找
# -*- coding: utf-8 -*-__author__ = 'Administrator'import bisect#简化一些操作#1:在一个列表中查找""" ...
- 文件夹65ad47d7-2e27-4a5c-b238-26643fdaeb98
这几天发现电脑中毒了,本地开的服务预览页面时,页面会被插入Html代码.我用360扫描之后发现有木马病毒(c:\programData有个65ad47d7-2e27-4a5c-b238-26643fd ...