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. WPF-------依赖项属性

    http://www.cnblogs.com/Zhouyongh/archive/2009/09/10/1564099.html http://www.cnblogs.com/Zhouyongh/ar ...

  2. hive函数--编码解码

    以UTF-8为例: 测试字符串:☕️午后咖啡☕️ 一.编码 hive"); 输出: %E2%98%95%EF%B8%8F%E5%8D%88%E5%90%8E%E5%92%96%E5%95%A ...

  3. php curl使用 常用操作

    1. http Get 简单的只需要 这四行 就 $ch = curl_init (); curl_setopt ( $ch, CURLOPT_URL, "http://site" ...

  4. html5编写软件哪个好？八款html5编写软件推荐

    随着各大浏览器对HTML5技术支持的不断完善,未来HTML5必将改变我们创建Web应用程序的方式.而很多html5的初学者都想找一款好用的编写软件,这里主机吧就给大家推荐七款好用的html5编写软件. ...

  5. （转）GraphicsMagick、命令行使用示例

    GraphicsMagick是从 ImageMagick 5.5.2 分支出来的,但是现在他变得更稳定和优秀,GM更小更容易安装.GM更有效率.GM的手册非常丰富GraphicsMagick的命令与I ...

  6. 在Kali Linux中下载工具Stegsolve

    关键字:Java,Stegsolve,Write Up 一.首先需要配置Java环境. 1.下载最新的Java JDK. 注意选择Accept License Agreement,并下载.tar.gz ...

  7. appium 使用环境安装配置记录

    一.安装配置Java (cmd输入java,回车,没有出现“不是内部或外部命令,也不是可运行的程序或批处理文件”,即为成功) 二.安装node.js (cmd输入node -v,显示版本号即为成功) ...

  8. frist Django app — 五、Test

    Test——很重要但是没有被重视起来的一个环节,至少是我自己,其实自己之前在做java web的时候就去尝试过怎么做REST接口的测试,一直没有找到一种合适方式,而且因为时间紧没有进一步深究,但是造成 ...

  9. HTTP和HTTPS协议，看一篇就够了

    https://blog.csdn.net/xiaoming100001/article/details/81109617 因为http请求是无状态的,所以需要三次握手.四次挥手来确定状态. 大纲 这 ...

  10. mysql 定时计划任务 wish 按照id分组定时循环启动

    SELECT count(*) FROM wish_sellers_in;UPDATE  wish_sellers_in  SET act_status =0 WHERE  id >=1 AND ...