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

效果:

10年积累的成都网站制作、网站设计经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站制作后付款的网站建设流程,更有泰州免费网站建设让你可以放心的选择与我们合作。

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

一、html代码:

menu1
menu2
menu3
menu4
menu5
menu6
111
222
333
444
666

二、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;
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持创新互联!


当前文章:利用js定义一个导航条菜单
网页地址:http://myzitong.com/article/pehesp.html

其他资讯