前端

jQuery水平导航栏切换图片

2022-03-11  本文已影响0人  马佳乐

当点击水平导航栏选项时,该选项出现红色上边框。并且对应下面图片内容更换。
需要给水平导航栏选项绑定两个事件。
通过添加类进行实现。


代码:
<!DOCTYPE html>
<html>

    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            ul {
                list-style: none;
            }
            
            .wrapper {
                width: 1000px;
                height: 475px;
                margin: 0 auto;
                margin-top: 100px;
            }
            
            .tab {
                border: 1px solid #ddd;
                border-bottom: 0;
                height: 36px;
                width: 320px;
            }
            
            .tab li {
                position: relative;
                float: left;
                width: 80px;
                height: 34px;
                line-height: 34px;
                text-align: center;
                cursor: pointer;
                border-top: 4px solid #fff;
            }
            
            .tab span {
                position: absolute;
                right: 0;
                background: #ddd;
                width: 1px;
                height: 34px;
                overflow: hidden;
            }
            
            .products {
                width: 1002px;
                border: 1px solid #ddd;
                height: 476px;
            }
            
            .products .main {
                float: left;
                display: none;
            }
            
            .products .selected {
                display: block;
            }
            
            .tab li.active {
                border-color: red;
                border-bottom: 0;
            }
        </style>
        <script src="js/jquery.js"></script>
        <script>
            $(function() {

                $(".tab-item").mouseenter(function() {
                    //两个事件
                    $(this).addClass("active").siblings().removeClass("active");
                    var index = $(this).index();
                    $(".main").eq(index).addClass("selected").siblings().removeClass("selected");
                });

            });
        </script>

    </head>

    <body>
        <div class="wrapper">
            <ul class="tab">
                <li class="tab-item active">国际大牌<span>|</span></li>
                <li class="tab-item">国妆名牌<span>|</span></li>
                <li class="tab-item">清洁用品<span>|</span></li>
                <li class="tab-item">男士精品</li>
            </ul>
            <div class="products">
                <div class="main selected">
                    <a href="#"><img src="images/guojidapai.jpg" alt="" /> </a>
                </div>
                <div class="main">
                    <a href="#"><img src="images/guozhuangmingpin.jpg" alt="" /> </a>
                </div>
                <div class="main">
                    <a href="#"><img src="images/qingjieyongpin.jpg" alt="" /> </a>
                </div>
                <div class="main">
                    <a href="#"><img src="images/nanshijingpin.jpg" alt="" /> </a>
                </div>
            </div>
        </div>

    </body>

</html>
上一篇下一篇

猜你喜欢

热点阅读