经典导航栏

360导航

切换背景颜色、音乐

HTML代码

   <ul id="nav" >
        <li class="liClick">我的主页</li>
        <li>新闻头条</li>
        <li>我的主页</li>
        <li>新闻头条</li>
        <li>我的主页</li>
        <li>新闻头条</li>
        <li>我的主页</li>
        <li>新闻头条</li>
        <li>我的主页</li>
    </ul>
    <audio src="http://www.w3school.com.cn/i/song.ogg"></audio>
    <audio src="http://www.w3school.com.cn/i/song.ogg"></audio>
    <audio src="http://www.w3school.com.cn/i/song.ogg"></audio>
    <audio src="http://www.w3school.com.cn/i/song.ogg"></audio>
    <audio src="http://www.w3school.com.cn/i/song.ogg"></audio>
    <audio src="http://www.w3school.com.cn/i/song.ogg"></audio>
    <audio src="http://www.w3school.com.cn/i/song.ogg"></audio>
    <audio src="http://www.w3school.com.cn/i/song.ogg"></audio>
    <audio src="http://www.w3school.com.cn/i/song.ogg"></audio>

css代码

*{
    margin: 0;
    padding: 0;
}
#nav{
    list-style-type: none;
    margin: 50px auto 0px;
    width: 960px;
    height: 38px;
    color: #333;
    font-size: 14px;
    padding: 0px;
    overflow: hidden;
}
#nav li{
    width: 105px;
    float: left;
    text-align: center;
    line-height: 38px;
    border-top: #c9cbce solid 1px;
    border-left: #c9cbce solid 1px;
    border-bottom:  #c9cbce solid 1px;
    cursor: pointer;
}
#nav li:last-child{
    border-right: #c9cbce solid 1px;
}
#nav .liClick{
    border-top: #54b82a solid 2px;
    border-bottom: none;
}
#nav span{
    width: 100%;
    height: 38px;
    display: block;
    position: relative;
    z-index: -1;
}

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
        $(document).ready(function(e){
                //点击li
                $('#nav li').click(function(e){
                    $('.liClick').removeClass('liClick');
                    $(this).addClass('liClick');
                });
                //每一个li添加一个底色
                var color=['#b9d329','#c0ebf7','#b9d329','#69bcf3','#79d9f3','#fa5f94','#acd180','#fab4cc','#ffaa5b'];
                $('#nav li').append('<span>');
                $('#nav span').each(function(index,elment){
                    $(this).css('background-color',color[index]);
                });
                //移动到li上颜色升起
                $('#nav li').hover(function(){
                    $(this).children('span').animate({'top':-38},200);
                    //获得当前li的索引编号
                    var index=$(this).index();
                    $('audio').get(index).play();//播放第index的音乐
                },function(){
                    $(this).children('span').animate({'top':0},200);
                    var index=$(this).index();
                    $('audio').get(index).pause();//播放第index的音乐
                });
            });
    </script>