时间:2021-05-25
效果:
一、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%; }.M_Content { height: 434px; width: 100%; z-index: 5; position: absolute; right: 2px; top: 0px;}以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了js实现适用于素材网站的黑色多级菜单导航条效果。分享给大家供大家参考。具体如下:这是一款适用于素材网站的黑色多级菜单导航条,无需jQuery,采用
本文实例为大家分享了Bootstrap导航条的具体代码,供大家参考,具体内容如下navbar:导航条的基础样式navnavbar-nav:导航条里菜单的的固定样
淘宝网店导航条具有了一个分类、正确引导的功效,因此许多淘宝网店都是有导航条的发生,但是导航条能够要还可以不必。不要想的,能够把导航条给掩藏起,那淘宝网店导航
一、和导航的区别1.导航条比导航多了一个条字2.直接上图导航:导航条:简单文字描述:由两张图看出,导航内容比较简单,而导航条可以包含导航及其他元素,如表单,搜索
大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现。调用pager方法,输入参数,会返回一个导航条的html字符串。方法的内