JQuery Tab切换效果

一、如图：
这里写图片描述

二、代码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/script/bootstrap/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/script/bootstrap/css/bootstrap-responsive.css" />
<script src="${pageContext.request.contextPath}/script/jquery.js"></script>
<!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      <style type="text/css">
           .tab ul li{list-style: none; padding: 0; margin: 0; text-align: center;}
           .tab .tabfirst li {float: left; background-color: #222; color: #fff; padding: 5px; margin-right: 2px;    border: 1px solid #fff;}
           .tab .tabfirst li.tabin {background-color: #6E6E6E; border: 1px solid #6E6E6E; color: #fff; width: 100px;}
           .tab div.contentfirst{clear:left; background-color: #6E6E6E; padding:10px; display:none; width: 400px; height: 50px; color:#fff; text-align: center;}
           .tab div.contentin {display: block;}  
           .tab a:link {color:#fff; }       /* 未被访问的链接 */
           .tab a:visited {color:#fff;} /* 已被访问的链接 */
           .tab a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
           .tab a:active {color:#0000FF;}   /* 正在被点击的链接 */ 
      </style>

      <script type="text/javascript">
        $(function(){
            /* $(".tab li").mouseover(function(){
                $(".tab .contentin").hide();
            }).mouseout(function(){
                //$(".tab .contentin").hide();
            }); */
            $("li").each(function(index){
            //每一个包装li的jquery对象都会执行function中的代码
                //index是当前执行这个function代码的li对应在所有li组成的数组中的索引值
                //有了index的值之后，就可以找到当前标签对应的内容区域
                $(this).mouseover(function(){  
                    var liNode = $(this);
                    timoutid = setTimeout(function(){
                        //将原来显示的内容区域进行隐藏
                        $("div.contentin").removeClass("contentin");
                        //对有tabin的class定义的li清除tabin的class
                        $(".tabfirst li.tabin").removeClass("tabin");
                        //当前标签所对应的内容区域显示出来
                        //$("div").eq(index).addClass("contentin");
                        $("div.contentfirst:eq(" + index + ")").addClass("contentin");
                        liNode.addClass("tabin");   
                    },300);         
                }).mouseout(function(){
                    clearTimeout(timoutid); 
                });
            });
        });
      </script>
</head>
    <body>
    <script src="${pageContext.request.contextPath}/script/bootstrap/js/bootstrap.js"></script>
        <div class="container">
            <h2>菜单切换</h2>
            <div class="tab">
                <ul class="tabfirst">
                    <li class="tabin">标签1</li>
                    <li>标签2</li>
                    <li>标签3</li>
                </ul>
                <div class="contentin contentfirst">我是内容1</div>
                <div class="contentfirst">我是内容2</div>
                <div class="contentfirst">我是内容3</div>
            </div>
        </div>
    </body>
</html>

———————————————————————
有需求者请加qq:136137465，非诚勿扰
(java 架构师全套教程，共760G, 让你从零到架构师，每月轻松拿3万）
01.高级架构师四十二个阶段高
02.Java高级系统培训架构课程148课时
03.Java高级互联网架构师课程
04.Java互联网架构Netty、Nio、Mina等-视频教程
05.Java高级架构设计2016整理-视频教程
06.架构师基础、高级片
07.Java架构师必修linux运维系列课程
08.Java高级系统培训架构课程116课时
（送：hadoop系列教程，java设计模式与数据结构， Spring Cloud微服务， SpringBoot入门）
——————————————————————–

猜你喜欢