利用js定义一个导航条菜单
程序员文章站
2022-06-28 13:01:40
效果:
一、html代码:
...
效果:
一、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; }
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
推荐阅读
-
利用node.js写一个爬取知乎妹纸图的小爬虫
-
使用asp.net mvc,boostrap及knockout.js开发微信自定义菜单编辑工具(推荐)
-
利用Promise自定义一个GET请求的函数示例代码
-
浅谈Vue.js中如何实现自定义下拉菜单指令
-
JS使用iView的Dropdown实现一个右键菜单
-
使用asp.net mvc,boostrap及knockout.js开发微信自定义菜单编辑工具(推荐)
-
Vue.js实现一个自定义分页组件vue-paginaiton
-
利用JS实现一个同Excel表现的智能填充算法
-
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
-
如何从零开始利用js手写一个Promise库详解