效果图：

<!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. jQuery autocomplete -默认

    <!doctype html> <html> <head> <meta name="content-type" content=" ...

  2. 无废话 Thrift 之 Hello World( PHP 版).

    Thrift 不再介绍.体验一把 PHP 的Server , PHP 的Client. 0.安装,装备环境,不表,运行 thrift -version 看到版本就行. 1.写 HelloThrift. ...

  3. 设计模式（java）--Bridge模式之蜡笔与毛笔的故事

    转自:吕震宇 http://www.cnblogs.com/zhenyulu/articles/67016.html#!comments 我想大家小时候都有用蜡笔画画的经历吧.红红绿绿的蜡笔一大盒,根 ...

  4. yii2 gridview 新增按钮 动态显示按钮

    新增一个按钮 [ 'class' => 'yii\grid\ActionColumn', 'header' => '操作', 'options' => ['width' => ...

  5. Word文档发布到CSDN博客

    目前大部分的博客作者在写博客这件事情上都会遇到以下3个痛点:1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.2.发布到博客或公众号平台 ...

  6. 试题 A: 组队 蓝桥杯

    试题 A: 组队本题总分: 5 分[问题描述]作为篮球队教练,你需要从以下名单中选出 1 号位至 5 号位各一名球员,组成球队的首发阵容.每位球员担任 1 号位至 5 号位时的评分如下表所示.请你计算 ...

  7. EF中三大开发模式之DB First,Model First,Code First以及在Production Environment中的抉择

    一:ef中的三种开发方式 1. db first... db放在第一位,在我们开发之前必须要有完整的database,实际开发中用到最多的... <1> DBset集合的单复数... db ...

  8. 自定义spring valid方式实现验证

    推荐:http://blog.csdn.net/xulianboblog/article/details/51694924

  9. [转]一次Delete&Insert引发的Mysql死锁

    近日遇到一个比较奇怪的deadlock错误, 错误详情: Deadlock found when trying to get lock; try restarting transaction; nes ...

  10. 键盘控制背景边框平滑移动（jquery）

    今天同事让我看了一个动画效果,是由键盘控制背景边框平滑移动,我感觉挺cool,所以我自己也动手制作了一个.目的是为了锻炼自己,看自己是否也能在短时间内实现. 先上图: 一.html代码 <!DO ...