SOURCE

console 命令行工具 X clear

                    
>
console
$('.menu li').eq(0).css({'background':'#ccc'}); 
$('.menu li').mouseenter(function(){
    $(this).css({'background':'#ccc'});
    $('.menu li').not($(this)).css({'background':'#272822'}); 
    idx=$(this).index('.menu li');
    //index的作用:搜索匹配的元素,并返回相应元素的索引值,从0开始计数
    $('.info p').eq(idx).show();
    $('.info p').not($('.info p').eq(idx)).hide();
    $('.moresp a').eq(idx).show();
    $('.moresp a').not($('.moresp a').eq(idx)).hide();
});
    <div class='menu'>
        <ul>
            <li>dog</li>
            <li>sheep</li>
            <li>basketball</li>
        </ul>
    </div>
 
    <div class='info'>
         <p>1<img src="dog.png" alt="" /></p>
         <p>2<img src="sheep.png" alt="" /></p>
         <p>3<img src="bk.png" alt="" /></p>
    </div>
        <p class='moresp'>aa:
            <a class="moreStyle" id="more-1" href="#" target="_blank">1更多>></a>
            <a class="moreStyle" id="more-2" style="display: none;" href="#" target="_blank">2更多>></a>
            <a class="moreStyle" id="more-3" style="display: none;" href="#" target="_blank">3更多>></a>
        </p>
*{
            font-family: 微软雅黑;
            margin:0px;
            padding:0px;
        }
        
        .menu{
            height:50px;
            background: #272822;
            line-height: 50px;
        }       
 
        .menu ul{
            list-style:none;
        }
 
        .menu ul li{
            float: left;
            color:#fff;
            margin-left:15px;
            line-height: 50px;
            width:100px;
            text-align:center;
        }
 
        .menu ul li:hover{
            cursor: pointer;
            background: #ccc;   
        }
 
        .info{
            height:256px;
            background: #ccc;
            overflow: hidden;
            padding:15px;
        }
 
        .info p{
            display: none;
        }
 
        .info p:first-child{
            display: block;
        }
 
        .menu a:hover{
            background: #ccc;
        }
        .moresp{
            /* position: fixed;
            top: 0;
            right: 0; */
        }
        .moresp a{
            color: #000;
        }

本项目引用的自定义外部资源