首页 > 代码库 > DIV+CSS 样式简单布局Tab 切换
DIV+CSS 样式简单布局Tab 切换
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <script src=http://www.mamicode.com/"../JS/JQuery/jquery-1.9.1.js" type="text/javascript"></script> <style type="text/css"> .content { margin: 50px; border: 8px; width: auto; height: auto; } .title { height: 20px; width: auto; } .common { width: 20%; float: left; font-size: 20px; color: Black; background-color: #E0E0E0; } .selected { background-color: #EEE; } .contentBody { width: auto; height: 500px; } .contendiv { padding: 20px; width: 97%; height: 500px; float: left; background-color: #EEE; } .divHidden { display: none; } </style> <script type="text/javascript"> $(function() { $(".common").click(function() { var divId = $(this).attr("id"); //alert(divId); if (jQuery(this).attr("class").indexOf("selected") > 0) { //jQuery(this).removeClass("selected") } else { $("div").removeClass("selected"); jQuery(this).addClass("selected"); } //var list = $(".contendiv"); $(".contendiv").addClass("divHidden"); $("#div" + divId).removeClass("divHidden"); }); }); </script></head><body> <form id="form1" runat="server"> <div> <div class="content"> <div class="title"> <div id="1" class="common selected"> Tab1 </div> <div id="2" class="common"> Tab2 </div> <div id="3" class="common"> Tab3 </div> </div> <div class="contentBody"> <div id="div1" class="contendiv"> 我是tab1 </div> <div id="div2" class="contendiv divHidden"> 我是tab2 </div> <div id="div3" class="contendiv divHidden"> 我是tab3 </div> </div> </div> </div> </form></body></html>
这个是一个最简单最原始的基本Tab切换的样子。很简单，刚学习样式布局JQuery的同学可以参考。大牛就不要拍砖了。
只要控制好头部的DIV的点击事件就OK了，下面对应的三个DIV的相对应切换隐藏。So Easy！
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。