text-align5db79b134e9f6b82c0b36e0489ee08ed: center>利用js和jquery定义一个导航条
效果：
一、html代码：
<p class="maintenance">
<p class="title">
<p class="m_button" id="plan">menu1</p>
<p class="m_button" id="expert">menu2</p>
<p class="m_button" id="team">menu3</p>
<p class="m_button" id="medic">menu4</p>
<p class="m_button" id="shelter">menu5</p>
<p class="m_button" id="warehouse">menu6</p>
</p>
</p>
<!-- menu1 -->
<p class="content" id="coplan">111
</p>
<!-- menu2 -->
<p class="content" id="coexpert" style="display: none">222
</p>
<!-- menu3 -->
<p class="content" id="coteam" style="display: none">333
</p>
<!-- menu4-->
<p class="content" id="comedic" style="display: none">444
</p>
<!--menu5-->
<p class="content" id="coshelter" style="display: none">
</p>
</p>
<!-- menu6 -->
<p class="content" id="cowarehouse" style="display: none">666
</p>
二、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和jquery定义一个导航条菜单的详细内容。