一

<!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 标签页切换的更多相关文章

  1. JS 标签页切换(复杂)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  2. 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 ...

  3. 在Bootstrap开发中解决Tab标签页切换图表显示问题

    在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...

  4. JavaScript 实现 标签页 切换效果

    JavaScript 实现 标签页 切换效果 版权声明:未经授权,严禁分享! 构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id=&quo ...

  5. Android之ActionBar、Tabs、Fragment、ViewPager实现标签页切换并缓存页面

    感觉 Android 到处都是坑,每个地方都要把人折腾半天. 今天来简单说说 Android之ActionBar.Tabs.Fragment.ViewPager 实现标签页切换并缓存页面 关于他们的介 ...

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

    在这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页 方法一: 首先,我们要把页面的大体框架和样式写出来,ht ...

  7. python selenium-webdriver 标签页切换（十五）

    测试过程中有时候会遇到点击某个按钮或者链接会弹出新的窗口,这时候我们的操作的页面还保持着最初打开页面,但是此时我们需要操作新打开的页面上的功能,这个时候我们需要切换一下标签页 . 其实页面的切换与fr ...

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

    在用vue开发的时候,单页面应用程序,而又有标签页这种需求,各种方式实现不了, 从这个 到这个,然后再返回上面那个 因为每个标签页的route不一样,导致组件重新渲染的问题,怎么都不知道如何实现... ...

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

    CSS部分: #Tab { margin:0 auto; width:640px; border:none; position:absolute; z-index:9; margin-left:320 ...

随机推荐

  1. csp-s模拟测试98

    csp-s模拟测试98 $T1$??不是我吹我轻松手玩20*20.$T2$装鸭好像挺可做?$T3$性质数据挺多提示很明显? $One$ $Hour$ $Later$ 这$T1$什么傻逼题真$jb$难调 ...

  2. flutter 显示HTML代码

    需求是后台返回的是富文本,所以需要吧富文本转成flutter 能识别的内容 找了几个插件只有这个比较好用写下来 dependencies: flutter_html: ^0.9.8 安装 下剩下的就比 ...

  3. 把swf反编译成fla的几种方法

    2007年著 第一种方法: 利用IMPERATOR FLA1.63 ,这个软件有演示版 和正式版 , 演示版不能反编译Action Scropt,在利用正式版反编译的过程中有时会丢失Action Sc ...

  4. vue多文件上传进度条 进度不更新问题

    转自 hhttp://www.cnblogs.com/muge10/p/6767493.html 感谢这位兄弟的文章,之前因为这个问题 ,我连续在sgmentflow上提问过多次,完全没人能回答.谢谢 ...

  5. 4.1_springboot2.2任务之异步、定时、邮件任务

    1.异步任务 ​ 在Java应用中,绝大多数情况下都是通过同步的方式来实现交互处理的:但是在处理与第三方系统交互的时候,容易造成响应迟缓的情况,之前大部分都是使用多线程来完成此类任务,其实,在Spri ...

  6. neo4j 基本概念和Cypher语句总结

    下面是一个介绍基本概念的例子,参考链接Graph database concepts: (1) Nodes(节点) 图谱的基本单位主要是节点和关系,他们都可以包含属性,一个节点就是一行数据,一个关系也 ...

  7. 【转】Java程序CPU飙升问题排查方法

    windows环境下cpu飙升问题 线上某台runtime机器(windows Server)cpu报警,这种情况初步就是代码里面死循环了,先把机器下线了保证不再有新的任务分配进来,然而cpu使用依然 ...

  8. iOS开发系列-支付宝支付

    概述 开发中支付通常都会集成支付宝支付,下面讲解支付宝的整体流程. 集成支付宝支付的流程 签约 与支付签约,得到获取商户的ID(partner).账户ID(seller).私钥privateKey. ...

  9. shell 命令 查找命令find，grep

    1.find 查找文件 [ find -name 文件名 ] 在当前目录及子目录中找这个文件 [ find -iname 文件名 ] 在当前目录及子目录中找这个文件,不区分大小写 [ find -na ...

  10. lnmp高人笔记

    http://www.cnblogs.com/qizekai/p/5878774.html http://www.cnblogs.com/qizekai/p/5879461.html