第利用js定義一個導(dǎo)航條菜單效果：

一、html代碼：

div

div

divid="Plan"menu1/div

divid="Expert"menu2/div

divid="Team"menu3/div

divid="Medic"menu4/div

divid="Shelter"menu5/div

divid="Warehouse"menu6/div

/div

/div

!--menu1--

divid="coPlan"111

/div

!--menu2--

divid="coExpert"222

/div

!--menu3--

divid="coTeam"333

/div

!--menu4--

divid="coMedic"444

/div

!--menu5--

divid="coShelter"

/div

/div

!--menu6--

divid="coWarehouse"666

/div

二、js代碼

$(".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: