a标签实现当前页面跳转显示相应div，以及js实现上下页查看

最新推荐文章于 2024-04-24 09:27:42 发布

yang_tf

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量1k

点赞数 2

分类专栏： html知识点文章标签： html css javascript

本文链接：https://blog.csdn.net/yang_tf/article/details/108284068

版权

html知识点专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
  <style>
      *{
          margin: 0;
          padding: 0;
      }
      .box{
          width: 100%;
          height: 100%;
      }
      ul{
        width: 100%;
        height: 50px;
        line-height: 50px;
        list-style: none;
        position: fixed;
        top: 0px;
        z-index: 1000;
        /* background: white; */
      }
      ul>a>li{
          float: left;
          width: 23%;
          text-align: center;
          /* border: 1px solid black; */
      }

    .content{
        position: fixed;
        top: 50px;
        bottom: 50px;
        overflow: auto;
        width: 100%;
    }
    .content div{
        float: left;
        width: 100%;
        height: 100%;
        text-align: center;
        color: white;
        line-height: 500px;
        
    }
    .foot{
        height: 50px;
        position: fixed;
        bottom: 0px;
        width: 100%;
    }
  </style>
</head>
<body>
<div class="box">
        <header>
            <ul>
                <a href="#a"><li >1111</li></a>
                <a href="#b"><li>2222</li></a>
                <a href="#c"><li>3333</li></a>
                <a href="#d"><li>4444</li></a>
            </ul>
        </header>
        <div class="content">
        <div id="a" style="background: blue;"><h1>11111</h1></div>
        <div id="b" style="background: blueviolet;"><h1>22222</h1></div>
        <div id="c" style="background: cadetblue;"><h1>33333</h1></div>
        <div id="d" style="background: crimson;"><h1>44444</h1></div>
        </div>
        <div class="foot">
            <button onclick="prev()">上一页</button>
            <button onclick="next()">下一页</button>
        </div>
</div>
</body>

<script>
        const Alist = document.querySelectorAll('a>li')
        Alist[0].style.background='red';
        let index = 0;
        for(let i in Alist){
            Alist[i].addEventListener('click',function(){
                this.style.background='red';
                index =  parseInt(i)
                for(var a =0; a <= Alist.length-1;a++){
                    if(i != a){
                        Alist[a].style.background='white';
                    }   
                }
            })

        };
        function prev(){
            if(index > 0){
                index -= 1;
                Alist[index].style.background='red';
                console.log(Alist[index].parentNode)
                Alist[index].parentNode.setAttribute("onclick",'');
                Alist[index].parentNode.click()
                for(var a =0; a <= Alist.length-1;a++){
                    if(index != a){
                        Alist[a].style.background='white';
                    }   
                }
            }
        };

        function next(){
            if(index < Alist.length-1){
                 index += 1;
                Alist[index].style.background='red';
                Alist[index].parentNode.setAttribute("onclick",'');
                Alist[index].parentNode.click()
                for(var a =0; a <= Alist.length-1;a++){
                    if(index != a){
                        Alist[a].style.background='white';
                    }   
                };
            }

        }
</script>
</html>

yang_tf

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
a标签实现当前页面跳转显示相应div，以及js实现上下页查看

<!DOCTYPE html><html><head> <style> *{ margin: 0; padding: 0; } .box{ width: 100%; height: 100%; } ul{ width: 100%; height: 50px; line
复制链接

扫一扫