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. 给查询出的SQL记录添加序号列，解决方法有以下两种

    第一: select ROW_NUMBER() OVER (ORDER BY a.字段 ASC) AS XUHAO,a.* from table a (table 为表名,字段为表a中的字段名) 第二 ...

  2. PADS导入DXF板框，不能将开放的2D线转换成闭合的板框错误

    刚开始学会用PADS,学习的时候都是在PADS里手绘一个板框的.然后实际项目中,都是需要导入结构DXF板框文件,第一次导入就发现了问题. 第一次导入DXF后,需要将DXF转换为板框,但提示 “不能将开 ...

  3. Linux中docker的使用(2)

    容器下安装jdk和tomcat:通过挂载文件的方法,把宿主机上的文件挂载到容器中,然后解压到opt目录下:tar -zxvf 包名 -C /opt//opt目录下drwxr-xr-x 8 10 143 ...

  4. oracle入坑日记<四>表空间

    1   表空间是什么 1.1.数据表看做的货品,表空间就是存放货品的仓库.SQLserver 用户可以把表空间看做 SQLserver 中的数据库. 1.2.引用[日记二]的总结来解释表空间. 一个数 ...

  5. 爬虫基础——HTTP基本原理

    ## 学习爬虫务必从了解请求网页的工作流程和网页的组成原理开始,不然直接去学爬虫操作像是请求库等等,大概率会知其然而不知其所以然(个人体会) URL和HTTP简介 URL(Uniform Resour ...

  6. linux gcc 静态 动态链接库

    静态链接库 首先生成依赖函数的目标文件 gcc -c source1.c source2.c; 然后归档目标文件到静态库 ar -rcs libYourID.a obj1.o obj2.o; 然后我们 ...

  7. 学习笔记：python3，PIP安装第三方库（2017）

    https://pip.pypa.io/en/latest/quickstart/ pip的使用文档 http://www.lfd.uci.edu/~gohlke/pythonlibs/   .whl ...

  8. [解决]RESTEASY003215: could not find writer for content-type text/html type: java.lang.String

    一.问题描述 1)项目一开始采用JAX-RS 2.1+Jersey 2.26调用REST服务能正常调用并获得正确响应: 2)当项目引入dubbo 2.6.2后也用到rest而dubbo要用到RESTE ...

  9. c语言中的利用函数实现交换两个字符，交换两个字符串

    c语言交换两个字符: 方法一:利用指针传址,效率比较高 void swap(int *a,int *b) { int temp; temp = *a; *a = *b; *b = temp } 方法二 ...

  10. 什么是pyc文件，Python

    pyc文件就是 Python 程序编译后得到的字节码文件 (py->pyc).pyc文件一般由3个部分组成:最开始4个字节是一个Maigc int, 标识此pyc的版本信息, 不同的版本的 Ma ...