效果图：

<!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. Fix: The account is not authorized to log in from this station

    If you have more the one computers running Windows, then its possible to connect them using HomeGrou ...

  2. Microsoft(C)注册服务器(32位)CPU占用高

    Microsoft(C)注册服务器(32位)CPU占用高 摘自:https://blog.csdn.net/jtsqrj/article/details/83034252 2018年10月12日 23 ...

  3. centos踩坑指南之安装composer

    composer是php的一个依赖管理器,那么安装composer可以快速编译php 但是在centos7以上 安装composer的有一个步骤有个小问题 对于centos6来说是 sudo mv c ...

  4. javascript总结46: JS三大系列-方便的offset 家族

    1 offset 家族 offset这个单词本身是--偏移,补偿,位移的意思. js中有一套方便的获取元素尺寸的办法就是offset家族: 2  offset 结构介绍为: 3 offset常用属性 ...

  5. VS2010 solution中完美的相对路径引用方法

    假设您有一个工程叫solar,路径结构是这样的: 公用头路径: d:\solar\public\include公用库路径:d:\solar\public\libmars项目 : d:\solar\ma ...

  6. Transaction And Lock--已提交读快照

    --===================================================== --行版本控制已提交读ALTER DATABASE DB5 SET READ_COMMI ...

  7. js 日期加一天或者减一天，最简单方法

    通过计算一天的时间戳是多少进行换算:(new Date(new Date().getTime()-86400000)).Format("yyyy-MM-dd hh:mm:ss")

  8. WPF判断当前窗体是否为模态

    WPF判断当前窗体是否为模态   1.使用System.Windows.Interop.ComponentDispatcher.IsThreadModal来判断 参照:https://social.m ...

  9. 【windows】dos命令查看某个文件夹下所有文件目录列表

    dos命令  dir展示一个目录中的文件夹和文件列表  /a代表显示隐藏目录

  10. C#加密解密总览

    C#SHA加密 C#MD5加密 C#RSA加密解密 C#DES加密和解密 C#AES加密和解密