效果图：

<!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. C++ 模板 与 泛型编程

    C++ 模板 与 泛型编程 前言 模板有两种:类模板和函数模板 .模板是泛型编程的基础. 什么叫:泛型编程? 使用独立于特定类型的方式进行编程.也就是我们在编程的时候不明确的写上类型,而是使用一个模板 ...

  2. 粗略了解fill与fill_n

    以前只知道数组赋值时用memset(): 而这几天却了解到了一个函数:fill(); 感觉以后会有用吧... std::fill template <class ForwardIterator, ...

  3. 洛谷 P3112 [USACO14DEC]后卫马克Guard Mark

    题目描述 Farmer John and his herd are playing frisbee. Bessie throws the frisbee down the field, but it' ...

  4. [SoapUI] 获取Cookie，并循环遍历当前Project下所有的Test Suite，Test Case，Test Step，将Cookie传递给这些Test Step

    import com.eviware.soapui.support.types.StringToStringMap //Get all th cookies in the response , her ...

  5. js运算浮点数

    在js中做小数:9.3+0.3会发现,得到的结果并不是9.6,而是9.600000000000001.这是为什么? Javascript采用了IEEE-745浮点数表示法,这是一种二进制表示法,可以精 ...

  6. Part3_lesson1---ARM汇编编程概述

    bootloader以及内核需要使用汇编语言,特别是在初始化的时候!以及在效率要求很高的地方会使用. 汇编程序框架: 其入口在_start处,这个入口需要用一个关键字为.global来声明它是一个全局 ...

  7. Python - excel 详解

    安装 pip install xlrd        # 读xlspip install xlwt     # 写xlspip install xlutils     # 改写xls 读取 Excel ...

  8. 51Nod 1554 欧姆诺姆和项链 (KMP)

    题意:中文题. 析:首先要使用KMP的失配函数 f ,对于长度为 i 的串,如果存在循环节那么  i % (i-f[i]) == 0,循环节的长度就是 i - f[i] ,当然次数就是 i / (i- ...

  9. idea中dependencies中总是有红色波浪线（缺少dependency）问题

    使用IDEA进行maven开发时,将新项目import进工作空间时,Maven Projects栏中的dependencies中总是有红色波浪线,如下图: 但是这些jar在我本地的maven仓库中实际 ...

  10. 编写高质量代码改善C#程序的157个建议——建议71：区分异步和多线程应用场景

    建议71:区分异步和多线程应用场景 初学者有时候会将异步和多线程混为一谈.如果对它们之间的区别不是很清楚,很容易写出下面这样的代码: private void buttonGetPage_Click( ...