效果图：

<!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选项卡效果的更多相关文章

  1. 简单的jquery选项卡效果

    html部分 <ul class="tab"> <li>最新</li> <li class="cur">热门&l ...

  2. javascript与jQuery选项卡效果

    HTML结构: <!doctype html><html><head><meta charset="utf-8"><title ...

  3. jquery 选项卡切换、选项卡封装、简单的jquery选项卡封装、tab切换效果

    相信选项卡切换是大家常用的效果单独写一个选项卡切换很方便但是要是一个页面出现多个选项卡不做封装的话会显得代码很杂乱 <div class="bodyCenter"> & ...

  4. 30个实用的jQuery选项卡/导航教程推荐

    很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果.本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助. 1. Animated Ta ...

  5. click事件和jquery选项卡

    一. click事件 实现效果是点击切换按钮,可以重复的切换背景色 <!DOCTYPE html> <html lang="en"> <head> ...

  6. jQuery选项卡tabulous

    jQuery选项卡tabulous,jQuery,选项卡,tab标签切换代码,扁平设计,jQuery选项卡tabulous是一款支持Scale.Slide.Scale Up.Flip等效果jquery ...

  7. css3线条围绕跑马+jquery打字机效果

    原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...

  8. JQuery动画效果

    jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...

  9. 分享5种风格的 jQuery 分页效果【附代码】

    jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示      源码下载 各个 ...

随机推荐

  1. VMware Workstation 虚拟机暂停后无法启动 出现Exception 0xc0000006 (disk error while paging) has occurred.错误

    虚拟机暂停了,突然停电,再开机后无法启动暂停的虚拟机,出现下面的错误 VMware Workstation unrecoverable error: (vmx)Exception 0xc0000006 ...

  2. jstack调试core文件

    摘自:https://stackoverflow.com/questions/37331266/jstack-throws-exception-interrogating-a-core // 错误示例 ...

  3. 编写高质量代码改善C#程序的157个建议——建议98：用params减少重复参数

    建议98:用params减少重复参数 如果方法的参数数目不定,且参数类型一致,则可以使用params关键字减少重复参数声明. void Method1(string str, object a){} ...

  4. 在java中对数据库进行增删改查

    1.java连接MySql数据库 代码区域: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ...

  5. centos 7防火情配置

    查看版本 firewall-cmd --version 2 查看指定端口是否开放 firewall-cmd --query-port=端口号/tcp 3 开放指定端口(--permanent表示永久, ...

  6. input获取焦点软键盘弹出影响定位

    解决移动端底部fixed和input获取焦点软键盘弹出影响定位的问题$(document).ready(function() {                                var ...

  7. [安裝] Ubuntu Server 初试

    在 Delphi 10.2 Tokyo 版里将支持 Linux 系统,先做一下学习记录: 安装 Ubuntu Server: 安装方法请参考官方教学影片: https://community.emba ...

  8. java（一）IntelliJ和eclipse环境下的Hello World

    1. IntelliJ环境下的Hello World 1. 启动IntelliJ IDE,选择File->New->Project 选择Java如果没有出现Project SDK,则选择N ...

  9. linux下PHP5.5的安装【oci8,pdo-oci,memcache,Zend OPCache扩展】

    最近一段时间学习了一下PHP,用CI做了一个小项目,为了开发方便,本地windows下使用了集成环境XAMPP,不过当把项目部署到linux上时,确实遇到了很多问题,下面把我在linux上安装php的 ...

  10. Exception has been thrown by the target of an invocation

    I'd suggest checking for an inner exception. If there isn't one, check your logs for the exception t ...