jquery的选项卡事件

<?php
/*
 * 
 * @Authors peng--jun 
 * @Email   1098325951@qq.com
 * @Date    2015-11-28 09:26:54
 * @Link    http://www.cnblogs.com/xs-yqz/
 * @version $Id$
 ==========================================
 */
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<link href="" rel="stylesheet">
<style>
*{margin: 0;padding: 0;}
    .active{background-color: yellow;border: 1px solid red;}
    ul{list-style-type: none;position: relative; 800px;height: 50px;background-color: #ccc;line-height: 30px;}
    li{float: left;margin-right: 10px; 100px;height:50px }
    .title{background-color: #ccc;}
    .info{display: none; 500px;height: 300px;background-color: #790;margin-top: 20px;}
    img{ 100%;height: 100%;}
    p{position: relative;height: 30px;background-color: rgba(0,0,0,0.4);line-height: 30px;top:-30px;display: none;color: #fff}
</style>
</head>
<body>
<ul>
    <li class="active"><img src="images/001.jpg" alt=""></li>
    <li><img src="images/002.jpg" alt=""></li>
    <li><img src="images/003.jpg" alt=""></li>
    <li><img src="images/004.jpg" alt=""></li>
</ul>

    <div class="info" style="display:block"><img src="images/001.jpg" alt=""><p>11111111111</p></div>
    <div class="info"><img src="images/002.jpg" alt=""><p>222222222222</p></div>
    <div class="info"><img src="images/003.jpg" alt=""><p>333lalalalal</p></div>
    <div class="info"><img src="images/004.jpg" alt=""><p>4444444444</p></div>


    <script type="text/javascript">
/*    window.onload = function(){
        var aTitle = document.getElementsByTagName('li');
        var aInfo = document.getElementsByClassName('info');

        for (var i = 0; i < aTitle.length; i++) {
            aTitle[i].index = i;
            aTitle[i].onmouseover = function(){
                for (var i = 0; i < aTitle.length; i++) {
                    aTitle[i].className = '';
                    aInfo[i].style.display = 'none';
                };
                this.className = 'active';//this表示当前的事件；
                aInfo[this.index].style.display = 'block'; //
            }
        };
    }
*/
    
    $(function(){
        $("li").each(function(index){
            $(this).mouseover(function(){
                $("li").eq(index).addClass("active");
                $("li").eq(index).siblings("li").removeClass("active");

                $("div.info").eq(index).css({"display":"block"});
                $("div.info").eq(index).siblings("div.info").css({"display":"none"});
                $("p").eq(index).css({"display":"none"});
                $("p").eq(index).fadeIn("slow");
            }).mouseout(function(){
                /*$("p").eq(index).fadeOut();*/
            })
        });
    });

    </script>
</body>
</html>

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/xs-yqz/p/5004874.html