利用射流研究…定义一个导航条菜单

效果：

一、html代码：

div class=' Maintenance ' div class=' Title ' div class=' M _ Button ' id=' Plan '菜单1/div class=' M _ Button ' id=' Expert '菜单2/div class=' M _ Button ' id=' Team '菜单3/div class=' M _ Button ' id=' Medic '菜单4/div class=' M _ Button ' id=' shield '菜单5/div class=' M _ Button ' id=' Warehouse '菜单6/div/div！-菜单1-div class=' Content ' id=' coPlan ' 111/div！-菜单2-div class=' Content ' id=' coExpert ' style=' display : none ' 222/div！-菜单3-div class=' Content ' id=' coTeam ' style=' display : none ' 333/div！- menu4 - div class='Content' id='喜剧style=' display : none ' 444/div！-菜单5-div class=' Content ' id=' coShelter ' style=' display : none '/div/div！-菜单6-div class=' Content ' id=' coWarehouse ' style=' display : none ' 666/div二、js代码

$('.m _ Button’).单击(函数(){ $(').m _ Button’).移除类(' M _ Button _ inner ')；$(这个)。添加类(' M _ Button _ inner ')；$('.内容')。hide()；TabButton=$(这个)。attr(' id ')；$('#co' TabButton).css('display '，' block ')；});三、css代码。M_Button {左侧浮动：高度： 42px宽度： 98px光标：指针；线高： 42pxcolor: # FFFFFF文本对齐：中心；font-size : 14px背景-图像：网址（././images/emergency/ReffectRadius/The _ popup _ 1。巴布亚新几内亚)；背景-重复：不重复；背景-位置：右侧；} .m _ button : Hover { color : # 000；背景-图像：网址（././images/emergency/ReffectRadius/The _ popup _ 2。巴布亚新几内亚)；背景-重复：次重复-x；}.M _ Button _ inner { color: # 000背景-图像：网址（././images/emergency/ReffectRadius/The _ popup _ 2。巴布亚新几内亚)；背景-重复：次重复-x；}.内容{左侧浮动：高度： 438像素；宽度： 100%;/*background-image: url(././././图像/检查/隐患/背景。巴布亚新几内亚)；*/}.M _ Content { height: 434px宽度： 100%;z指数： 5；绝对位置：/*背景-颜色： # 666；*/右： 2pxtop: 0px}以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！