当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 利用js定义一个导航条菜单

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

2019年06月11日  | 移动技术网IT编程  | 我要评论

效果：

一、html代码：

<div class="maintenance">
  <div class="title">
   <div class="m_button" id="plan">menu1</div>
   <div class="m_button" id="expert">menu2</div>
   <div class="m_button" id="team">menu3</div>
   <div class="m_button" id="medic">menu4</div>
   <div class="m_button" id="shelter">menu5</div>
   <div class="m_button" id="warehouse">menu6</div>
  </div>
 </div>
 <!-- menu1 -->
 <div class="content" id="coplan">111
 </div>
 <!-- menu2 -->
 <div class="content" id="coexpert" style="display: none">222
 </div>
 <!-- menu3 -->
 <div class="content" id="coteam" style="display: none">333
 </div>
 <!-- menu4-->
  <div class="content" id="comedic" style="display: none">444
 </div>
 <!--menu5-->
 <div class="content" id="coshelter" style="display: none">
    </div>
 </div>
 <!-- menu6 -->
 <div class="content" id="cowarehouse" style="display: none">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;
}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持移动技术网！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网