jquery选项卡效果
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../jquery-1.12.4.js"></script>
<script type="text/javascript"></script>
<style>
*{
margin: 0;
padding: 0;
}
body{
padding: 100px 30%;
}
ul{
list-style: none;
height: 30px;
line-height: 30px;
}
li{
float: left;
width: 100px;
background: url("bg_1.png") repeat-x;
border:1px solid #A1AFB9;
border-bottom: none;
margin-right: 5px;
text-align: center;
cursor: pointer;
position: relative;/*解决ie67存在的兼容问题*/
}
.content{
width: 400px;
border: 1px solid #A1AFB9;
padding: 10px;
height: 145px;
}
li.one{
background: #fff;
}
li:hover{
background: url("bg_3.png") repeat-x;
}
</style>
<script>
$(function () {
$(".content div:gt(0)").hide();
$("li").click(function () {
$(this).addClass("one").siblings().removeClass("one");
var index = $("li").index(this);
$('.content div').eq(index).show().siblings().hide();
})
})
</script>
</head>
<body>
<div class="optionCard">
<ul>
<li class="one">菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>
<div class="content">
<div>随着移动互联网的兴起，互联网行业正向更加智能化的Web3.0时代迈进，中国互联网行业进入了高速发展的势态，PHP语言已经为大部分企业广泛应用和重视（如：新浪、百度、腾讯、TOM、淘宝、搜狐、网易等）PHP语言是各大IT公司首选的互联网编程语言。PHP开发优势明显，未来发展空间巨大，IT行业急需PHP开发人才。 </div>
<div>实际上Internet表示的意思是互联网，又称网际网路，根据音译也被叫做因特网、英特网，是网络与网络之间所串连成的庞大网络，这些网络以一组通用的协议相连，形成逻辑上的单一且巨大的全球化网络，在这个网络中有交换机、路由器等网络设备、各种不同的连接链路、种类繁多的服务器和数不尽的计算机、终端。使用互联网可以将信息瞬间发送到千里之外的人手中，它是信息社会的基础。</div>
<div>因特网始于1969年的美国。是美军在ARPA（阿帕网，美国国防部研究计划署）制定的协定下，首先用于军事连接，后将美国西南部的加利福尼亚大学洛杉矶分校、斯坦福大学研究学院、UCSB（加利福尼亚大学）和犹他州大学的四台主要的计算机连接起来。这个协定由剑桥大学的BBN和MA执行，在1969年12月开始联机。</div>
</div>
</div>
</body>
</html>
jquery选项卡效果的更多相关文章
- 简单的jquery选项卡效果
html部分 <ul class="tab"> <li>最新</li> <li class="cur">热门&l ...
- javascript与jQuery选项卡效果
HTML结构: <!doctype html><html><head><meta charset="utf-8"><title ...
- jquery 选项卡切换、选项卡封装、简单的jquery选项卡封装、tab切换效果
相信选项卡切换是大家常用的效果单独写一个选项卡切换很方便但是要是一个页面出现多个选项卡不做封装的话会显得代码很杂乱 <div class="bodyCenter"> & ...
- 30个实用的jQuery选项卡/导航教程推荐
很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果.本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助. 1. Animated Ta ...
- click事件和jquery选项卡
一. click事件 实现效果是点击切换按钮,可以重复的切换背景色 <!DOCTYPE html> <html lang="en"> <head> ...
- jQuery选项卡tabulous
jQuery选项卡tabulous,jQuery,选项卡,tab标签切换代码,扁平设计,jQuery选项卡tabulous是一款支持Scale.Slide.Scale Up.Flip等效果jquery ...
- css3线条围绕跑马+jquery打字机效果
原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...
- JQuery动画效果
jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...
- 分享5种风格的 jQuery 分页效果【附代码】
jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示 源码下载 各个 ...
随机推荐
- 20-list简单使用：
C++list的使用总结及常用list操作 C++中list用法详解 STL中list的erase()方法的使用 listiterator 最近刚刚接触stl的list 学习的时候遇到了很多 ...
- Python学习笔记_获取当前目录和上级目录
实验目标:获取当前目录和上级目录 系统环境: 1.OS:Win10 64位 2.Pythoh 3.7 3.实验路径:C:\Work\Python\MergeExcel 代码参考: # -*- codi ...
- 无需写try/catch，也能正常处理异常
对于企业应用的开发者来说,异常处理是一件既简单又复杂的事情.说其简单,是因为相关的编程无外乎try/catch/finally+throw而已:说其复杂,是因为我们往往很难按照我们真正需要的策略来处理 ...
- 美化input type=range标签滑动样式（带渐变效果）
input原来的样式就不在此赘述了: 下面看一下实际项目中用到的input输入框,同步绑定输入数据,实现输入框双向绑定(实际项目中使用的是vue框架): html部分: <div class=& ...
- Openssl dsaparam命令
一.简介 dsaparam指令用来生成和操作dsa参数 二.语法 openssl dsaparam [-inform DER|PEM] [-outform DER|PEM] [-in filename ...
- [模板]割点（tarjan）
洛谷P3388 注意:记得tarjan的打法 注意割点的判断条件:子节点个数>2并且为根节点 当它不为根节点时并且low[to]>dfn[u] 判断时是在子节点未被记录的时候 #incl ...
- 【转载】实战mysql分区(PARTITION)
转载地址:http://lobert.iteye.com/blog/1955841 前些天拿到一个表,将近有4000w数据,没有任何索引,主键.(建这表的绝对是个人才) 这是一个日志表,记录了游戏中物 ...
- C# GDI+绘图介绍
最近查阅网上资料,将GDI+的基本知识汇总如下: 一.基本的知识 GDI+:Graphics Device Interface Plus也就是图形设备接口,提供了各种丰富的图形图像处理功能; 在C#. ...
- python之CSV文件格式
1.csv文件是以一些以逗号分隔的值 import csv filename = "wenjian.csv" with open(filename) as f: reader = ...
- 编写高质量代码改善C#程序的157个建议——建议150：使用匿名方法、Lambda表达式代替方法
建议150:使用匿名方法.Lambda表达式代替方法 方法体如果过小(如小于3行),专门为此定义一个方法就会显得过于繁琐.比如: static void SampeMethod() { List< ...