html+css+js实现标签页切换

CSS部分:

#Tab {
margin:0 auto;
width:640px;
border:none;
position:absolute;
z-index:9;
margin-left:320px;
_margin-left:0px;
padding-top:180px;
}
.Menubox {
height:26px;
border-bottom:2px solid #64B8E4;
background:#none;
}
.Menubox ul {
list-style:none;
margin:0;
padding:0;
position:absolute;
}
.Menubox ul li {
float:left;
background:#64B8E4;
line-height:26px;
display:block;
cursor:pointer;
width:65px;
text-align:center;
color:#fff;
font-weight:bold;
border-top:1px solid #64B8E4;
border-left:1px solid #64B8E4;
border-right:1px solid #64B8E4;
border-top-left-radius:4px;
border-top-right-radius:4px;
}
.Menubox ul li.hover {
background:#fff;
border-bottom:1px solid #fff;
color:#147AB8;
}
.Contentbox {
clear:both;
margin-top:0px;
border-top:none;
height:10px;
padding-top:8px;
}
.Contentbox ul {
list-style:none;
margin:7px;
padding:0;
}
.Contentbox ul li {
line-height:24px;
border-bottom:1px dotted #ccc;
}

JS部分:

<script type="text/javascript">
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
</script>

HTML部分:

<div id="Tab">
<div class="Menubox">
<ul>
<li id="menu1" onmouseover="setTab(‘menu‘,1,2)" class="hover">部门动态</li>
<li id="menu2" onmouseover="setTab(‘menu‘,2,3)" >机关收文</li>
<li id="menu3" onmouseover="setTab(‘menu‘,3,3)" >机关发文</li>
</ul>
</div>
<div class="Contentbox">
<div id="con_menu_1" class="hover">
<ul>
<li><a href="#">1213</a></li>
<li><a href="#">12312123</a></li>
<li><a href="#">123123123</a></li>
<li><a href="#">3123123213</a></li>
<li><a href="#">1231232131</a></li>
<li><a href="#">123123123123</a></li>
<li><a href="#">3232323</a></li>
<li><a href="#">23232323</a></li>
</ul>
</div>
<div id="con_menu_2" style="display:none">
<ul>
<li><a href="#">2312312312</a></li>
<li><a href="#">123123123</a></li>
<li><a href="#">1231231231</a></li>
<li><a href="#">123123123123</a></li>
<li><a href="#">123123123123</a></li>
<li><a href="#">12312312312</a></li>
<li><a href="#">123123123</a></li>
<li><a href="#">123123123123123</a></li>
</ul>
</div>
<div id="con_menu_3" style="display:none">
<ul>
<li><a href="#">123</a></li>
<li><a href="#">12323213</a></li>
<li><a href="#">323123123</a></li>
<li><a href="#">123123123</a></li>
<li><a href="#">123123</a></li>
<li><a href="#">123123</a></li>
<li><a href="#">1231231</a></li>
<li><a href="#">123123123</a></li>
</ul>
</div>
</div>
</div>

时间: 2024-12-28 15:47:19

html+css+js实现标签页切换的相关文章

js实现tab页切换选项卡代码特效

原文:js实现tab页切换选项卡代码特效 源代码下载地址:http://www.zuidaima.com/share/1550463557864448.htm JS 写的tab切换效果

web前端中实现多标签页切换的效果

在这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页 方法一: 首先,我们要把页面的大体框架和样式写出来,html和css代码如下: <ul id="tab">    <li id="tab1" onclick="show(1)">10元套餐</li>    <li id="tab2" oncli

python selenium-webdriver 标签页切换(十四)

测试过程中有时候会遇到点击某个按钮或者链接会弹出新的窗口,这时候我们的操作的页面还保持着最初打开页面,但是此时我们需要操作新打开的页面上的功能,这个时候我们需要切换一下标签页 . 其实页面的切换与frame的切换比较相识,一种切换时本页面内frame的操作,而标签页面是多页面的操作,道理很相似.下面讲解下操作页面标签会涉及到那些方法. driver.current_window_handle                      #获取当前窗口的句柄 driver.window_handle

vue单页面条件下添加类似浏览器的标签页切换功能

在用vue开发的时候,单页面应用程序,而又有标签页这种需求,各种方式实现不了, 从这个 到这个,然后再返回上面那个 因为每个标签页的route不一样,导致组件重新渲染的问题,怎么都不知道如何实现......... 简直郁闷到爆炸,后来和同学谈起的时候,说起生命周期这个才恍然大悟, 对于vue的生命周期,因为用的少,本身多用的是created,mounted这两个,都忘记beforeDestroy这些了,然后抓瞎了好久 实现方式是 每次销毁组件之前   缓存数据    能够用到的是 this.$d

JS 标签页切换(复杂)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" cont

简单实现tab标签页切换

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <style>

bootstrap3 - 标签页切换

<!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></title>     <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"

javascript标签页切换功能(极简代码)

1 <!doctype html> 2 <html lang="en"> 3 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 4 <head> 5 <meta charset="UTF-8"> 6 <title>boss爱国</title> 7 <style&g

标签页(tab)切换的原生js,jquery和bootstrap实现

概述 这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容 标签页(tab)切换的原生js实现 标签页(tab)切换的jquery实现 标签页(tab)切换的bootstrap实现 标签页(tab)切换的原生js实现 说明: 代码是我自己写的,与课程中的不一样. 主要利用display:none来把部分内容隐藏而显示其它内容. 遇到了事件的循环绑定,我是利用添加id使其成为钩子来解决的. 代码: <!DO