锚点展现与隐藏

最新推荐文章于 2022-03-07 09:21:22 发布

小森呀

最新推荐文章于 2022-03-07 09:21:22 发布

阅读量454

点赞数 1

分类专栏：封装

本文链接：https://blog.csdn.net/KEY2018/article/details/116176959

版权

封装专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>锚点</title>
    <script src="./js/jquery-3.5.1.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        display: flex;
        justify-content: center;
      }
      li {
        list-style: none;
        width: 50px;
        height: 50px;
        margin: 50px 20px 0px;
        text-align: center;
        line-height: 50px;
        background-color: lightcoral;
      }
      li a {
        display: block;
        color: black;
        text-decoration: none;
      }
      div {
        width: 100%;
        height: 600px;
        margin-top: 50px;
        text-align: center;
        line-height: 600px;
        font-size: 50px;
        background-color: lightseagreen;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="./锚点.html#a">a</a></li>
      <li><a href="./锚点.html#b">b</a></li>
      <li><a href="./锚点.html#c">c</a></li>
      <li><a href="./锚点.html#d">d</a></li>
      <li><a href="./锚点.html#e">e</a></li>
    </ul>
    <div class="section" id="a">a</div>
    <div class="section" id="b" style="display: none">b</div>
    <div class="section" id="c" style="display: none">c</div>
    <div class="section" id="d" style="display: none">d</div>
    <div class="section" id="e" style="display: none">e</div>
  </body>
  <script>
    $(function () {
      common("div"); //页面加载完成时先判断一下地址栏内容
      window.addEventListener("hashchange", function () {
        common("div");
      });
      function common(dom) {
        $("" + window.location.hash + "")
          .css({
            display: "block",
          })
          .siblings(dom)
          .css({
            display: "none",
          });
      }
    });
  </script>
</html>

小森呀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
锚点展现与隐藏

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.
复制链接

扫一扫