如何利用js和JQuery定义一个导航条菜单

利用js和JQuery定义一个导航条

效果：

一、html代码：

        

            
menu1
            
menu2
            
menu3
            
menu4
            
menu5
            
menu6
        

    

    
    
111
    
    
    
222
    
    
    
333
    
    
     
444
    
    
    

              
    

    
    
666
    

二、js代码

Whimsical

Whimsical推出的AI思维导图工具

下载

$(".M_Button").click(function () {
        $(".M_Button").removeClass("M_Button_inner");
        $(this).addClass("M_Button_inner");
        $(".Content").hide();
        TabButton = $(this).attr('id');
        $('#co' + TabButton).css('display', 'block');
    });

三、css代码

.M_Button {
    float: left;
    height: 42px;
    width: 98px;
    cursor: pointer;
    line-height: 42px;
    color: #FFFFFF;
    text-align: center;
    font-size: 14px;
    background-image: url(../../images/emergency/ReffectRadius/The_pop-up_1.png);
    background-repeat: no-repeat;
    background-position: right;
}

    .M_Button:hover {
        color: #000;
        background-image: url(../../images/emergency/ReffectRadius/The_pop-up_2.png);
        background-repeat: repeat-x;
    }.M_Button_inner {
    color: #000;
    background-image: url(../../images/emergency/ReffectRadius/The_pop-up_2.png);
    background-repeat: repeat-x;
}.Content {
    float: left;
    height: 438px;
    width: 100%;    /*background-image: url(../../../../images/Inspection/Hidden_danger/background.png);*/}.M_Content {
    height: 434px;
    width: 100%;
    z-index: 5;
    position: absolute;    /*background-color: #666;*/
    right: 2px;
    top: 0px;
}