1.代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.0.js"></script>

    <style type="text/css">

        body,div,ul{ padding:0; margin:0;}

        #container{width:800px; margin:50px;}

        .tab{ padding:0; margin:0;  }

        .tab li{ list-style:none; float:left;padding:0; margin-right:10px; line-height:30px; height:30px; width:65px; text-align:center;}

        .content{ float:none; padding-top:30px; border:solid 1px black; clear:both; }

        .content div{ border-top:0px; height:60px;}

        .tab_selected{ border-left:solid 1px black; background-color:#ffffff; border-right:solid 1px black; 

        border-top:solid 1px black; border-bottom:0px; bottom:-1px; position:relative; z-index:1}

        .tab_current{  text-decoration:underline;}

       </style>

       <script language="javascript" type="text/javascript">

           $(

            function() {

                $(".content div:gt(0)").hide();

                $(".tab li").css("cursor", "pointer");

                $(".tab li").hover(function() {

                $(this).addClass("tab_current");

                }, function() {

                    $(this).removeClass("tab_current");

                }).click(

                    function() {

                        $(this).addClass("tab_selected").siblings().removeClass("tab_selected");

                        $(".content div").eq($(this).index()).siblings().hide().end().show();

                    }

                )

            }

           );

       </script>

  </head>

  

  <body>

    <div id="container">

       <div class="tab">

            <ul>

                <li class="tab_selected">选项卡A</li>

                <li>选项卡B</li>

                <li>选项卡C</li>

            </ul>

       </div>

       <div class="content">

            <div>内容一</div>

            <div>内容二</div>

            <div>内容三</div>

       </div>

    </div>

  </body>

</html>

2.效果图：

转载：https://blog.csdn.net/lyr1985/article/details/47018325

Div+CSS+JQuery实现选项卡，即通过点击不同的li跳转到不同的div中显示不同的内容或者执行不同的操作。的更多相关文章

  1. 用DIV+Css+Jquery 实现的旧版微信飞机大战。

    用jquery 实现的旧版微信飞机大战. 以前一直都是做后台和业务逻辑,前端很少去做, 现在个小游戏. 方向键控制方向,Ctrl 键 放炸弹(当然你的有炸弹,哈哈)! 主要都是用div+Css实现的, ...

  2. div+css文字垂直居中 解决左侧头像右侧姓名，姓名多换行后相对于头像仍居中显示

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  3. div+css+jQuery图片横向滚动代码（带左右点击按钮）

    首先感谢Blue老师的javascript教程,给了我很多的启发,这是我在看完10 - 定时器的使用 - 2这节视频后,自己试着用jQuery重新改写了一下代码,感觉至少比百度搜出来的那一坨靠谱多了, ...

  4. div+css+jQuery简单实现投票功能

    昨天看到C#群里有人问一个投票功能如何实现... 我对此很感兴趣,为了练习一下,就有了以下代码. 投票功能使用jQuery实现..纯html代码...数据通过json字符串传递,通过 eval转换为j ...

  5. CSS+JQuery实现Tabs效果，点击更改背景色（不含图片）

    1,Html代码 <body> <div id="box"> <ul id="tab_nav"> <li class= ...

  6. 如何从零开始学习DIV+CSS

    CSS是样式,DIV是层.DIV+CSS是网站标准(web标准),通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别.因为XHTML网站设计标准中,不再使用表格定位技术,而是采用D ...

  7. SEO为什么要求网页设计师用DIV+CSS布局网页?

    问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+C ...

  8. DIV+CSS详解

    DIV+CSS详解 ✪DIV+CSS"这种叫法其实是一种不准确的叫法 在做笔记的最前面必须先给大家纠正一个错误,就是"DIV+CSS"这种叫法其实是一种不准确的叫法,是国 ...

  9. DIV+CSS专题：十天学会DIV+CSS

    DIV+CSS专题:十天学会DIV+CSS,在网上看到的.感觉蛮好,推荐一下. 十天学会DIV+CSS(WEB标准)CHM格式文件下载 第十天 div+css网页标准布局实例教程(三) 第十天 div ...

随机推荐

  1. Ubuntu下把缺省的dash shell修改为bash shell

    Ubuntu下缺省使用的是shell是dash,而不是bash.从/bin/sh软连接的指向可以看出这点. dash shell 虽然比bash shell更轻便,但是它并不支持所有的语法,运行she ...

  2. （转）K-近邻算法（KNN）

    K-近邻算法(KNN)概述  KNN是通过测量不同特征值之间的距离进行分类.它的思路是:如果一个样本在特征空间中的k个最相似(即特征空间中最邻近)的样本中的大多数属于某一个类别,则该样本也属于这个类别 ...

  3. 通过ldap验证svn服务

    1.简单介绍: 这里需要介绍一点的就是svn服务器的验证是需要通过SASL机制的,那么SASL全称为(Simple Authentication and security Layer),是一种用来扩充 ...

  4. java内存问题排查及分析

    最近了解了一下jdk对于jvm分析工具的使用,下面通过一个简单的列子介绍一下,以下内容部分来自其他帖子. 下面这段代码明显有问题(从网上抄的) import java.util.HashMap; im ...

  5. UBNT ex-r +netgear gs105e v2 +ap 设置vlan 步骤记录 及相关知识整理

    设备连接:路由器ex-r的eth0 连接 光猫拨号,eth3连接交换机gs105e,交换机gs105e的eth3连接无线ap 需求:路由器拨号上网,通过不同ssid的无线网络可以连接不同vlan,且交 ...

  6. 微信小程序中把页面生成图片

    这个问题我上网搜了一下,答案有多种,但是真正能用的没有几何.很多答案都是雷同,有的网友也不负责任,直接拿来照抄,自己也不跑一遍看看.哎,不说了,说多了全是泪.希望我们的技术达人在分享的时候,能够真实的 ...

  7. flask sqlchemy 多对多的自引用关系定义

    多对多的定义可以使用关联表,或者重新定义一个模型,通过模型定义多对多的自引用在flask web开发书里有讲到,这里主要演示用关联表定义的方法. from flask_sqlalchemy impor ...

  8. 搭建Android浏览器壳子

    搭建Android浏览器壳子 不久前我们要做一个Android端的手机APP,但没有用Android原生的组件, 而是把这个APP做成了一个访问某一固定IP的浏览器,即单纯的一个壳子: 具体的内容用V ...

  9. python之路：数据类型初识

    python开发之路:数据类型初识 数据类型非常重要.不过我这么说吧,他不重要我还讲个屁? 好,既然有人对数据类型不了解,我就讲一讲吧.反正这东西不需要什么python代码. 数据类型我讲的很死板.. ...

  10. BaseRecycleViewAdapterHelper

    BaseRecycleViewAdapterHelper 官方文档 git说明文档 1.English 2.中文