JS 标签页切换
一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>自适应宽度的标签导航</title>
<style>
body
{
font-size: 14px;
font-family: "宋体"
}
ol li { margin: 8px}
#con
{
font-size: 12px;
margin: 0px auto;
width: 600px
}
#tags
{
padding:0px;
margin: 0px 0px 0px 10px;
width: 400px;
height: 23px
}
#tags li
{
background: url(images/tagleft.gif) no-repeat left bottom;
float: left;
margin-right: 1px;
list-style-type:none;
height: 23px
}
#tags li a
{
padding-right: 10px;
padding-left: 10px;
background: url(images/tagright.gif) no-repeat right bottom;
float: left;
padding-bottom: 0px;
color: #999;
line-height: 23px;
padding-top: 0px;
height: 23px;
text-decoration:none
}
#tags li.emptyTag
{
background: none transparent scroll repeat 0% 0%;
width: 4px
}
#tags li.selectTag
{
background-position: left top;
margin-bottom: -2px;
position: relative;
height: 25px
}
#tags li.selectTag a
{
background-position: right top;
color: #000;
line-height: 25px;
height: 25px
}
#tagContent
{
padding: 1px;
border: #aecbd4 1px solid;
background-color: #fff
}
.tagContent
{
padding:10px;
display: none;
background: url(images/bg.gif) repeat-x;
width: 576px;
color: #474747;
height: 250px
}
#tagContent div.selectTag
{
display: block
}
</style>
</head>
<body>
<div id="con">
<ul id="tags">
<li class="selectTag"><a onMouseover="selectTag('tagContent0',this)" href="javascript:void(0)">标签一</a> </li>
<li><a onMouseover="selectTag('tagContent1',this)" href="javascript:void(0)">标签二</a> </li>
<li><a onMouseover="selectTag('tagContent2',this)" href="javascript:void(0)">自适应宽度的标签</a> </li>
<li><a onMouseover="selectTag('tagContent3',this)" href="javascript:void(0)">自适应宽度</a> </li>
</ul>
<div id="tagContent">
<div class="tagContent" id="tagContent0">第一个标签的内容</div>
<div class="tagContent selectTag" id="tagContent1">第二个标签的内容</div>
<div class="tagContent" id="tagContent2">第三个标签的内容</div>
<div class="tagContent" id="tagContent3">第四个标签的内容</div>
</div>
</div>
<script>
function selectTag(showContent,selfObj){
// 操作标签
var tag = document.getElementById("tags").getElementsByTagName("li");
var taglength = tag.length;
for(i=0; i<taglength; i++){
tag[i].className = "";
}
selfObj.parentNode.className = "selectTag";
// 操作内容
for(i=0; j=document.getElementById("tagContent"+i); i++){
j.style.display = "none";
}
document.getElementById(showContent).style.display = "block";
}
</script>
</html>
二
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<style type="text/css">
#content {
width: 400px;
height: 200px;
}
#tab_bar {
width: 400px;
height: 20px;
float: left;
}
#tab_bar ul {
padding: 0px;
margin: 0px;
height: 20px;
text-align: center;
}
#tab_bar li {
list-style-type: none;
float: left;
width: 133.3px;
height: 20px;
background-color: gray;
}
.tab_css {
width: 400px;
height: 200px;
background-color: orange;
display: none;
float: left;
}
</style>
<script type="text/javascript">
var myclick = function(v) {
var llis = document.getElementsByTagName("li");
for(var i = 0; i < llis.length; i++) {
var lli = llis[i];
if(lli == document.getElementById("tab" + v)) {
lli.style.backgroundColor = "orange";
} else {
lli.style.backgroundColor = "gray";
}
}
var divs = document.getElementsByClassName("tab_css");
for(var i = 0; i < divs.length; i++) {
var divv = divs[i];
if(divv == document.getElementById("tab" + v + "_content")) {
divv.style.display = "block";
} else {
divv.style.display = "none";
}
}
}
</script>
</head>
<body>
<div id="content">
<div id="tab_bar">
<ul>
<li id="tab1" onclick="myclick(1)" >
tab1
</li>
<li id="tab2" onclick="myclick(2)">
tab2
</li>
<li id="tab3" onclick="myclick(3)">
tab3
</li>
</ul>
</div>
<div class="tab_css" id="tab1_content" style="display: block">
<div>页面一</div>
</div>
<div class="tab_css" id="tab2_content" style="display: none">
<div>页面二</div>
</div>
<div class="tab_css" id="tab3_content" style="display: none">
<div>页面三</div>
</div>
</div>
</body>
</html>
三
<!DOCTYPE HTML>
<html>
<head>
<style>
.content{
float:left;
}
.tab{
list-style: none;
float:left;
}
.tab-active{
border-bottom:none;
border-top-width: 2px;
height: 28px;
background:red;
color: #333333;
font-weight: bold;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul class="tab clearfix">
<li>标签1</li>
<li class="tab-active">标签2</li>
<li>标签3</li>
</ul>
<div class="content">
<div class="inner" style="display:none">
标签1内容
</div>
<div class="inner">
标签2内容
</div>
<div class="inner" style="display:none">
标签3内容
</div>
</div>
<script type="text/javascript">
var lists = $('.tab li');
var contents = $('.content .inner');
function bindEvent(){
lists.each(function(index_li, li){
$(this).on('click', function(event){
lists.removeClass('tab-active');
$(this).addClass('tab-active');
contents.each(function(index_content, content){
if(index_li === index_content){
$(this).show();
}else{
$(this).hide();
}
});
});
});
}
function init(){
bindEvent();
}
init();
</script>
</body>
</html>
JS 标签页切换的更多相关文章
- JS 标签页切换(复杂)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- JS实现标签页切换效果
本文实例为大家分享了JS标签页切换的具体代码,供大家参考,具体内容如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ...
- 在Bootstrap开发中解决Tab标签页切换图表显示问题
在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...
- JavaScript 实现 标签页 切换效果
JavaScript 实现 标签页 切换效果 版权声明:未经授权,严禁分享! 构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id=&quo ...
- Android之ActionBar、Tabs、Fragment、ViewPager实现标签页切换并缓存页面
感觉 Android 到处都是坑,每个地方都要把人折腾半天. 今天来简单说说 Android之ActionBar.Tabs.Fragment.ViewPager 实现标签页切换并缓存页面 关于他们的介 ...
- web前端中实现多标签页切换的效果
在这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页 方法一: 首先,我们要把页面的大体框架和样式写出来,ht ...
- python selenium-webdriver 标签页切换(十五)
测试过程中有时候会遇到点击某个按钮或者链接会弹出新的窗口,这时候我们的操作的页面还保持着最初打开页面,但是此时我们需要操作新打开的页面上的功能,这个时候我们需要切换一下标签页 . 其实页面的切换与fr ...
- vue单页面条件下添加类似浏览器的标签页切换功能
在用vue开发的时候,单页面应用程序,而又有标签页这种需求,各种方式实现不了, 从这个 到这个,然后再返回上面那个 因为每个标签页的route不一样,导致组件重新渲染的问题,怎么都不知道如何实现... ...
- html+css+js实现标签页切换
CSS部分: #Tab { margin:0 auto; width:640px; border:none; position:absolute; z-index:9; margin-left:320 ...
随机推荐
- NX二次开发-UFUN输入表达式TAG,得到表达式字符串UF_MODL_ask_exp_tag_string
NX9+VS2012 #include <uf.h> #include <uf_modl.h> UF_initialize(); //创建表达式 tag_t NewExpTag ...
- HDU-1226-超级密码-队列+广搜+大数取模
Ignatius花了一个星期的时间终于找到了传说中的宝藏,宝藏被放在一个房间里,房间的门用密码锁起来了,在门旁边的墙上有一些关于密码的提示信息: 密码是一个C进制的数,并且只能由给定的M个数字构成,同 ...
- i++ 和 ++i 的区别
先说运算规则吧. i++ 是先赋值后自增:++i 是先自增后赋值. 以下是代码示例: int a=0; int b=0; int i=0; a=i++; System.out.println(&quo ...
- 手机网站Meta的使用
meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部,不包含任何内容. 标签的属性定义了与文档相关联的名称/值对. ...
- 2.用Python套用Excel模板,一键完成原亮样式
from xlutils.copy import copy import xlrd import xlwt tem_excel=xlrd.open_workbook('日统计.xls',formatt ...
- 全球CMOS图像传感器厂商
近期,台湾地区的Yuanta Research发布报告,介绍了其对CMOS图像传感器(CIS)市场的看法,以及到2022年的前景预期. 从该研究报告可以看出,2018年全球CMOS图像传感器的市场规模 ...
- C 常见字符串操作函数
头文件 <string.h> 1. char *strstr(const char *str1, const char *str2); 判断str2是否为str1的子串 //s ...
- ResultSetMetaData中getColumnLabel和getColumnName的区别
利用jdbc连接数据库查询时,通常返回的结果就是每行数据的键值对集合.这时我们需要知道查询出来的数据有哪些字段.根据ResultSet结果集得到的ResultSetMetaData就可以获取到每个字段 ...
- next() 与 nextLine() 区别
next() 与 nextLine() 区别 next(): 1.一定要读取到有效字符后才可以结束输入. 2.对输入有效字符之前遇到的空白,next() 方法会自动将其去掉. 3.只有输入有效字符后才 ...
- vue项目 上传到git
1. git add . 效果: 2. git commit -m '' 3. git push 效果: 4.在码云上就可以看到修改啦 2018-05-19 08:52:52