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. Specify 的含义 ------ 转载

    specify block用来描述从源点(source:input/inout port)到终点(destination:output/inout port)的路径延时(path delay),由sp ...

  2. django 三种缓存模式的使用及注意点

    Django 缓存模式的使用(主要针对RestFul设计模式的项目) 有三种模式: 全站使用缓存模式(整个项目每个接口都会使用缓存,缺点:所以接口都无法实时性获取数据) 单独视图缓存模式(单个接口使用 ...

  3. hanlp使用自定义词典抽取关键词

    1.在data/dictionary/custom/路径下新建文件 myDict.txt.,添加新的单词,单词,词性,词频.并删除当前文件夹下的bin文件, 2.在hanlp配置文件中的CustomD ...

  4. 封装poi导出篇

    前言 先写的导入,以为导出会很简单,没想到导出的东西也不少,基于常用的几种样式和校验写了一个简单的导出,包括时间,数字,文字长度,下拉框,提示框校验,基础样式包括字体,字体颜色,背景颜色等功能,可以使 ...

  5. javascript 数组的简单应用

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. 用ASP.NET_Regsql.exe创建Session数据库

    CMD: C:\Users\ZhangSC>C:\Windows\Microsoft.NET\Framework64\v4.0.30319\aspnet_regsql.exe -S ZhangS ...

  7. JdbcTemplate 多数据源 jdbc

    参考: https://www.cnblogs.com/tangzekai/p/7782773.html 配置: package top.zekk.twodatasource.config; impo ...

  8. JEECG3.8 全套实战视频全部开放，免费下载！

    JEECG快速开发平台V3.8版本自去年10月份发布以来,下载使用数屡创新高,并受到众多开发者积极反馈.为帮助更多初学者能够快速上手,JEECG V3.8版本实战教程现已全面开放,免费下载!本教程深入 ...

  9. 45_redux_comment应用_redux版本_异步功能

    /* * 包含所有action的type名称常量 * */ //添加评论 export const ADD_COMMENT = 'add_comment'; //删除评论 export const D ...

  10. SQL中IF和CASE语句

    IF表达式 IF(A,B,C): 如果 A 是TRUE (A <> 0 and A<> NULL),则 IF()的返回值为B; 否则返回值则为 C.IF() 的返回值为数字值或 ...