Jquery实现横向tab切换
//需求：鼠标放在不同的导航栏上，下面显示的内容自动切换
//代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.1.11.1.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.tab{
width: 300px;
border: 1px solid #000;
overflow: hidden;
background-color: #ddd;
}
.tab li{
height: 30px;
line-height: 30px;
width: 50px;
float: left;
text-align: center;
}
.tab .act{
height: 28px;
line-height: 28px;
border-top: 2px solid orange;
background-color: white;
}
.con{
width: 300px;
border:1px solid #000;
}
.con li{
height: 300px;
display: none;
text-align: center;
line-height: 300px;
}
.con .show{
display: block;
}
</style>
</head>
<body>
<ul class="tab">
<li class="act">图片</li>
<li>专栏</li>
<li>热点</li>
</ul>
<ul class="con">
<li class="show">图片</li>
<li>专栏</li>
<li>热点</li>
</ul>
<script type="text/javascript">
$(".tab li").mouseover(function(){
// 进入元素的索引,找到当前li的索引
var index = $(this).index();
//console.log(index);
// tab栏的切换
$(this).addClass("act").siblings().removeClass("act");
// con栏的切换
$(".con li").eq(index).addClass("show").siblings().removeClass("show");
})
</script>
</body>
</html>
Jquery实现横向tab切换的更多相关文章
- jquery+bootstrap实现tab切换, 每次切换时都请求数据, 点击提交分别向不同的地址提交数据
今天一个朋友叫帮做一个tab切换, 每一个tab内容区域都是从后台取出的数据, 这些数据要用表格的形式显示处理, 并且表格的内容区域可以修改, 如下所示: 例子查看请演示查看. 截图如图所示: 实现步 ...
- jquery写的tab切换效果 非常简单
自己写的一款 tab切换效果,比较简单,适合新手 <style type="text/css">*{margin:0; padding:0; font-size:12p ...
- 自己编写jQuery插件之Tab切换
自己编写jQuery插件之 Tabs切换 jquery ui 带有Tabs切换插件,但其css样式太难维护,引用的东西太多,因此就自己写了个. 起初我Html代码架子是这样的: <div cla ...
- 封装jQuery插件实现TAB切换
先上效果图: 直接上代码: index.html <!DOCTYPE html> <html lang="en"> <head> <met ...
- jquery时间轴tab切换效果实现结合swiper实现滑动显示效果
需求:根据时间轴进行tab页面内容切换(时间轴需要滑动查看并选择) 实现思路: 结合swiper插件实现滑动显示效果 根据transform: translateX进行左侧切换效果的实现(具体实现cs ...
- jQuery 练习：tab 切换
实现内容随菜单切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- jquery中简易tab切换
<!doctype html> <html> <head> <title>test</title> <meta content=&qu ...
- 一款jquery写出来的tab切换
当时做这个的时候,当前状态是不规则的,li对应的有3块内容,分别设定不同背景图片,只显示当前的一个背景,鼠标移上去的时候其余2个用background-position: -1000px 0px;来隐 ...
- jQuery的DOM操作实例（1）——选项卡&&Tab切换
一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...
随机推荐
- [原]Java工程打包注意事项
注意事项(持续增加...): 如果Java工程中用到了注解,在用eclipse打jar包时需要注意一下,勾上“Add directory entries”,否则注解的类会注册不上
- Centos610安装Firefox
yum -y install firefox yum install fonts-chinese yum install fonts-ISO8859-2-75dpi 修改 /etc/sysconfig ...
- Redis 作为windows服务运行
如果服务器上以控制台方式运行Redis服务,非常不方便,不小心会被人点击关闭,到时服务就挂了. 使用 命令的方式,将配置加载到windows服务,执行后无法启动,提示配置问题. redis-serve ...
- stack的使用-Hdu 1062
Text Reverse Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tota ...
- MD5 加密解密字符串
方法1: using System.Text; using System.Security.Cryptography; public string Hash(string toHash) { MD5C ...
- UIKeyWindow的设置
新建一个纯代码iOS项目,需要对AppDelegate文件和项目的Info.plist文件做一番配置. 第一步:将Info.plist中的下面两项的value删除掉(保留空字符串),如下图 第二步:在 ...
- asp.net core配置下载文件
asp.net core的wwwroot文件夹下默认时保存静态文件的地方,外面可以直接访问,但是如果是一些无法识别的后缀文件,如(.apk),会报错404 如果想要实现下载这些文件,在配置静态文件中间 ...
- 腾讯玄武实验室向（CNVD）提交了一个重大漏洞“BucketShock”
导读 11 月 21 日,在小米 IoT 安全峰会上,腾讯安全玄武实验室负责人于旸(花名:TK 教主)在演讲中透露,腾讯玄武实验室最近向国家信息安全漏洞共享平台(CNVD)提交了一个重大漏洞“Buck ...
- HTML table表头排序箭头绘制法【不用箭头图片】
效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="ut ...
- 【PAT甲级】1006 Sign In and Sign Out (25 分)
题意: 给出学生人数M,输入M组学生ID,到机房的时间,离开机房的时间.输出最早到机房的学生的ID,空格,最后离开机房的学生的ID.(M大小未给出,就用了1e5) AAAAAccepted code: ...