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>

转载于:https://www.cnblogs.com/alex-xxc/p/9738733.html

jquery选项卡效果相关推荐

用fieldset标签轻松实现Tab选项卡效果
fieldset是一个不常用的HTML标签,它可以将表单内的元素分组显示,legend标签为 fieldset 元素定义标题.由于各浏览器在显示fieldset和legend结构时会自动为其添加边框和 ...
js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些一.总结一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
分享30个最佳 jQuery Lightbox 效果插件
您可能还喜欢 60款很酷的 jQuery 幻灯片演示和下载 Web开发者必备的20款超赞jQuery插件提升你网站水平的 jQuery 插件推荐 12个很棒的学习 jQuery 的网站推荐分享27 ...
前端开发推荐-创建一个精美的jquery图片库效果
在Web和图形设计的世界,jquery它是使用最广泛的技术. 在他的帮助下,我们可以创建很多伟大的事情.丰富的jQuery插件,在互联网上,使我们能够毫不费力地创建幻灯片,表格,动画和其他各种良好的效 ...
10个最佳jQuery Lightbox效果插件收集
http://www.qianduan.net/top-10-jquery-lightbox-scripts.html 您的位置:首页 > Ajax, Resource > 10个最佳jQ ...
(二)jquery学习----jquery的效果
jquery的效果 jquery的基本效果包括隐藏.显示.切换,滑动,淡入淡出,以及动画等等. 一.隐藏与显示通过调用hide()和show()方法实现. 语法如下: $(selector).hid ...
jQuery动画效果之上卷下拉
jQuery动画效果之上卷下拉 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 开发工具与关键技术:Vis ...
精心挑选12款优秀 jQuery 手风琴效果插件和教程
当你想在有限的页面空间内展示多个内容片段的时候,手风琴(Accordion)效果就显得非常有用,它可以帮助你以对用户非常友好的方式实现多个内容片段之间的切换.借助流行的 jQuery 框架,只需很少的 ...
微信小程序实例：实现tabs选项卡效果
最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已 ...

jquery选项卡效果

jquery选项卡效果相关推荐

最新文章

热门文章