利用js定义一个导航条菜单

利用js定义一个导航条菜单

一、html代码:

<div> <div> <div>menu1</div> <div>menu2</div> <div>menu3</div> <div>menu4</div> <div>menu5</div> <div>menu6</div> </div> </div> <!-- menu1 --> <div>111 </div> <!-- menu2 --> <div>222 </div> <!-- menu3 --> <div>333 </div> <!-- menu4--> <div>444 </div> <!--menu5--> <div> </div> </div> <!-- menu6 --> <div>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: #666;*/ right: 2px; top: 0px; }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwwgps.html