当前页面，点击右侧导航栏，去到页面指定的地方

最新推荐文章于 2024-09-13 23:32:49 发布

lv程序媛

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量145

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Ace_Lilylv/article/details/141959147

版权

         <div id="tab1" >111</div>
         <div id="tab2" >222</div>
         <div id="tab3" >333</div>
         <div id="tab4" >444</div>

假设该div里的111是要定位的内容

          <div class="navbar">
            <ul>
              <li><a href="#" onclick=" window.location.href = '#tab1'">111</a></li>
              <li><a href="#" onclick=" window.location.href = '#tab2'">222</a></li>
              <li><a href="#" onclick=" window.location.href = '#tab3'">333</a></li>
              <li><a href="#" onclick=" window.location.href = '#tab4'">444</a></li>
            </ul>
          </div>

写一个οnclick=" window.location.href = '#tab1'"即可，点击过去即可到111在的地方

样式如下：

.navbar {
  background-color: #f8f9fa;
  padding: 10px;
  margin-top: 31px;
}
.navbar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.navbar ul li {
  margin-bottom: 5px;
}
.navbar ul li a {
  text-decoration: none;
  color: #333;
  display: block;
  padding: 5px;
}
.navbar ul li a:hover {
  background-color: #e9ecef;
}

效果图：