js:选择内容进行页面跳转

最新推荐文章于 2022-12-19 11:28:16 发布

彤小雨

最新推荐文章于 2022-12-19 11:28:16 发布

阅读量484

点赞数

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/Ambition_PX/article/details/103524089

版权

这篇博客介绍了如何使用JavaScript实现用户在网页中选中特定内容后，通过点击按钮进行页面跳转的功能。文章提供了HTML和JavaScript的代码示例。

摘要由CSDN通过智能技术生成

选中内容,点击下一步跳转相应页面

html部分代码

<body>
  <!--导航栏部分HTML代码-->
  <nav id="nav">
    <ul>
      <li class="act">选卡1</li>
      <li>选卡2</li>
    </ul>
  </nav>
  <!--内容部分HTML代码-->
  <div id="container">
    <section class="tab" style="background-color: tomato">内容1</section>
    <section class="tab" style="background-color: cyan">内容2</section>
  </div>
</body>

js部分代码

<script>
  window.onload = function () {
    //获取 li 也就是选项卡选项tab
    var nav = document.getElementById('nav');
    var oNav = nav.getElementsByTagName('li');
    //获取 包裹在container里面的section（内容）
    var container = document.getElementById('container');