滑动选项卡特效 

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            #container{ 
                width: 980px; 
                height: 600px;
                /*background: #ffcccc;*/
                margin: 50px auto;
            }
            #container .header {
                height: 45px;
                line-height: 45px;
                border-bottom: 2px solid #000;
            }
            #container .header h3 {
                float: left;
                margin-left: 20px;
            }
            #container .header ul {
                float: right;
                margin-top: -2px;
            }
            #container .header ul li {
                list-style: none;
                float: left;
                width: 100px;
                text-align: center;
                border: 1px solid #ccc;
                border-right: none;
            }
            #container .header ul li:last-child {
                border-right: 1px solid #ccc;
            }
            #container .header ul li.active {
                border: 2px solid #000;
                border-bottom: 2px solid #fff;
            }
            #container .showCon {
                margin-top: 10px;
            }
            #container .showCon img {
                width: 980px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div class="header">
                <h3>服装</h3>
                <ul>
                    <li class="active">经典男装</li>
                    <li>靓丽女装</li>
                    <li>可爱童装</li>
                </ul>
            </div>
            <div class="showCon">
                <img src="images/1.jpg" />
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript">
            $("#container .header ul li").hover(function() {
                var index = $(this).index() + 1;
                console.log(index);
                $(this).addClass("active").siblings().removeClass("active");
                $("#container .showCon").html("<img src='images/" + index + ".jpg' />");
            });
        </script>
    </body>
</html>

 

posted @ 2017-05-13 10:10  齐心  Views(273)  Comments(0)    收藏  举报