总结：三种方式实现单击页签切换页面效果

最新推荐文章于 2024-10-17 15:09:58 发布

木叶的思想

最新推荐文章于 2024-10-17 15:09:58 发布

阅读量1.6w

点赞数 5

分类专栏： WEB前端文章标签： WEB前端

本文链接：https://blog.csdn.net/qq_36600589/article/details/55224791

版权

WEB前端专栏收录该内容

0 篇文章 1 订阅

订阅专栏

demo
当页面中需要仅切换或刷新某块指定区域内容，而非整个页面时，可以用以下三种方式较为简单的实现效果：
方法一：A标签+Iframe标签；A标签中target指向Iframe。这样的好处是副页面内容较多时，仍能保持主页面的整洁，便于修改和维护。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style>
        body,ul,li{
            margin:0;
            padding:0;
        }
        a{
            text-decoration: none;
            color:black;
        }
        .box{
            width:800px;
            height:600px;
            border:1px solid #f90;
            border-radius:10px;
            margin:40px auto;
        }
        h3{
            text-align:center;
        }
        ul{
            list-style: none;
            border-bottom:1px solid #f90;
            overflow:hidden;
        }
        ul li{
            float:left;
            border:1px solid #f90;
            margin-left:-1px;
            padding:6px 30px;
            border-top-left-radius:3px;
            border-top-right-radius:3px;
            border-bottom:none;
            cursor:pointer;
        }
        ul li:first-child{
            background:#f90;
        }
        ul li:first-child a{
            color:white;
        }
        iframe{
            width:100%;
            height:100%;
            border:none;
            background:none;
        }
    </style>
</head>
<body>
<div class="box">
    <h3>单击页签在指定区域切换页面</h3>
    <ul id="example1">
        <li><a href="content1.html" target="content1">页签一</a></li>
        <li><a href="content2.html" target="content1">页签二</a></li>
        <li><a href="content3.html" target="content1">页签三</a></li>
    </ul>
    <iframe src="content1.html" name="content1" ></iframe>
</div>
<script>
    var lis=document.querySelectorAll("#example1 li");
    var len=lis.length;
//切换页签样式：遍历li，给li绑定onclick事件
    for(var i=0;i<len;i++){
        lis[i].onclick=function(){
            //切换页签样式↓
            for(var i=0;i<len;i++){
                if(lis[i]==this){//判断是否为当前对象
                    lis[i].style.background="#f90";
                    lis[i].querySelector("a").style.color="white";
                }else{
                    lis[i].style.background="white";
                    lis[i].querySelector("a").style.color="black";
                }
            }
        }
    }
</script>
</body>
</html>

方法二：A标签+:target目标伪类；单击时使活动对象在最上方呈现。这种方式适用于较少内容的切换。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style>
        body,ul,li{
            margin:0;
            padding:0;
        }
        a{
            text-decoration: none;
            color:black;
        }
        .box{
            width:800px;
            height:600px;
            border:1px solid #f90;
            border-radius:10px;
            margin:40px auto;
        }
        h3{
            text-align:center;
        }
        ul{
            list-style: none;
            border-bottom:1px solid #f90;
            overflow:hidden;
        }
        ul li{
            float:left;
            border:1px solid #f90;
            margin-left:-1px;
            padding:6px 30px;
            border-top-left-radius:3px;
            border-top-right-radius:3px;
            border-bottom:none;
            cursor:pointer;
        }
        ul li:first-child{
            background:#f90;
        }
        ul li:first-child a{
            color:white;
        }
        .content_box {
            position:relative;
            width:100%  ;
            height:100px;
        }
        .content_box h1{
            position:absolute;
            top:0;
            left:0;
            background:white;
            z-index:1;
        }
        .content_box h1:first-child{
            z-index:5;
        }
        .content_box h1:target{
            z-index:5;
        }
    </style>
</head>
<body>
<div class="box">
    <h3>单击页签在指定区域切换页面</h3>
    <ul id="example2">
        <li><a href="#content1">页签一</a></li>
        <li><a href="#content2">页签二</a></li>
        <li><a href="#content3">页签三</a></li>
    </ul>
    <div class="content_box">
        <h1 id="content1">内容一</h1>
        <h1 id="content2">内容二</h1>
        <h1 id="content3">内容三</h1>
    </div>
</div>
<script>
    var lis=document.querySelectorAll("#example2 li");
    var len=lis.length;
//切换页签样式：遍历li，给li绑定onclick事件
    for(var i=0;i<len;i++){
        lis[i].onclick=function(){
            //切换页签样式↓
            for(var i=0;i<len;i++){
                if(lis[i]==this){//判断是否为当前对象
                    lis[i].style.background="#f90";
                    lis[i].querySelector("a").style.color="white";
                }else{
                    lis[i].style.background="white";
                    lis[i].querySelector("a").style.color="black";
                }
            }
        }
    }
</script>
</body>
</html>

方法三：无序列表+Iframe标签；为li创建新属性存放副页面的链接地址。这种方式模拟了A标签，好处是不用在li中嵌套A标签，简化了结构。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style>
        body,ul,li{
            margin:0;
            padding:0;
        }
        .box{
            width:800px;
            height:600px;
            border:1px solid #f90;
            border-radius:10px;
            margin:40px auto;
        }
        h3{
            text-align:center;
        }
        ul{
            list-style: none;
            border-bottom:1px solid #f90;
            overflow:hidden;
        }
        ul li{
            float:left;
            border:1px solid #f90;
            margin-left:-1px;
            padding:6px 30px;
            border-top-left-radius:3px;
            border-top-right-radius:3px;
            border-bottom:none;
            cursor:pointer;
        }
        ul li:first-child{
            background:#f90;
            color:white;
        }
        iframe{
            width:100%;
            height:100%;
            border:none;
            background:none;
        }
    </style>
</head>
<body>
<div class="box">
    <h3>单击页签在指定区域切换页面</h3>
    <ul id="example3">
        <li>页签一</li>
        <li>页签二</li>
        <li>页签三</li>
    </ul>
    <iframe src="" name="content"></iframe> 
</div>
<script>
    var content=document.getElementsByName("content")[0];
    var lis=document.querySelectorAll("#example3 li");
    var len=lis.length;
    var src=["content1.html","content2.html","content3.html"]//将地址存入数组
    content.setAttribute("src",src[0]);
    //遍历li对象，给每个li新增src属性并赋值
    for(var i=0;i<len;i++){
        lis[i].setAttribute("src",src[i]);//给当前对象添加属性并赋值
    }
    //遍历li，给li绑定onclick事件：切换iframe里的src属性，并切换页签样式
    for(var i=0;i<len;i++){
        lis[i].onclick=function(){
            content.setAttribute("src",this.getAttribute("src"));//切换iframe里的src值
            //切换页签样式↓
            for(var i=0;i<len;i++){
                if(lis[i]==this){//判断是否为当前对象
                    lis[i].style.background="#f90";
                    lis[i].style.color="white";
                }else{
                    lis[i].style.background="white";
                    lis[i].style.color="black";
                }
            }
        }
    }
</script>
</body>
</html>