js实现导航的tab切换

导航的样式

直接上导航的html和样式

<style type="text/css">
        ul {
            width: 400px;
            margin: 50px auto;
            display: flex;
            align-items: center;
            list-style: none;
        }
      
        li {
            margin-right: 20px;
        }
        
        .active {
            color: red;
        }
    </style>
	<ul>
        <li class="active">房产</li>
        <li>家居</li>
        <li>二手房</li>
        <li>三手房</li>
    </ul>

原生的js实现方法

 <script>
        var list = document.getElementsByTagName("li");

        // 1.原生方法

        // 遍历循环li
        for (let i = 0; i < list.length; i++) {

            list[i].onmouseover = function() {

                // 清除其他的样式--排他思想
                for (let j = 0; j < list.length; j++) {

                    list[j].classList.remove('active');
                }

                // 设置当前的样式

                this.className = 'active'
            }


        }
    </script>

jquery实现方法

 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        let list = $('li');
        // 遍历循环li
        list.each((index, item) => {

            $(item).mouseover(function() {

                // 排他
                $(this).siblings().removeClass('active')

                // 设置当前的样式
                $(this).addClass('active')

            })
        })
    </script>