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. 生信基础知识【04】GO和pathway分析

    非原创 参考资料: 一文掌握GO和pathway分析 - 生物信息学讨论版 -丁香园论坛http://www.dxy.cn/bbs/thread/34904124#34904124 GO富集 GO是G ...

  2. 关于js-xlsx的简单使用

    关于js-xlsx的简单使用 最近要做一个东西用到对excel的操作,就是在前端将excel加载进来,操作后再生成excel,在网上找了很多种办法,能够实现的demo是下面这个: 纯前端利用 js-x ...

  3. Flink开发环境搭建（maven）

    1.下载scala sdk http://www.scala-lang.org/download/ 直接到这里下载sdk,(https://downloads.lightbend.com/scala/ ...

  4. Spring事务@Transactional标签深入学习

    事务管理是应用系统开发中必不可少的一部分.Spring为事务管理提供了丰富的功能支持.Spring事务管理分为编码式和声明式 两种方式.编码式事务指的是通过编码方式实现事务;声明式事务基于AOP,将具 ...

  5. Openstack EOL 版本离线安装源

    当Openstack EOL,网上的yum源无法安装openstack版本和rdo  ,则无法正常通过yum源直接安装openstack和rdo ,只是直接安装openstack后,也无法通过yum源 ...

  6. lambda函数式编程

    一.接口注解(@FunctionalInterface) @FunctionalInterface interface Interface1 { public void print(); } publ ...

  7. 正则表达式中引用shell变量

    注意,是用单引号包含双引号来引用变量 > MAPPING_ID_PO="000001:AP1-TU1000002:AP1-TU2000003:AP1-TU3000004:AP1-TU4 ...

  8. Android APK反编译（二）

    参考:APK反编译 工具介绍 apktool 作用:资源文件获取,可以提取出图片文件和布局文件进行使用查看 dex2jar 作用:将apk反编译成java源码(classes.dex转化成jar文件) ...

  9. github 解决 Agent admitted failure to sign using the key

    公司迁移git 新库,重新迁移数据. 添加 ssh key  1. 首先要在新git 库管理平台 添加新的ssh-key : 本机上执行 ssh-keygen -t rsa -C "Your ...

  10. BitmapData.threshold()方法

    import flash.display.Bitmap; import flash.display.BitmapData; import flash.geom.Rectangle; import fl ...