使用HTML/jQuery重定向到页面的特定部分

qoefvg9y 于 2023-01-12 发布在 jQuery

关注(0)|答案(3)|浏览(125)

我创建了以下导航菜单：
enter image description here
我希望每个子菜单重定向到同一页面的特定部分：

<section class="sec-1">text</section>
        <section class="sec-2">text</section>
        <section class="sec-2">text</section>

子菜单1重定向到部分1，子菜单2重定向到部分2，等等。
我试过了
enter image description here
这两种方法都不起作用。我还尝试只使用HTML，将section ID放在a属性的href字段中：这是可行的，但不是预期的结果。它没有准确地重定向到该部分的开头，在我关闭子菜单后，它返回到开头。
此外，我希望子菜单自动关闭后，重定向，因为它是通过点击打开，而不是通过悬停在它。

jquery

来源：https://stackoverflow.com/questions/75061932/redirect-to-a-particular-section-of-a-page-using-html-jquery

3条答案

按热度按时间

8yoxcaq71#

<section id="sec-1">text</section>
         <section id="sec-2">text</section>
         <section id="sec-3">text</section>
 
 <!--id, not class..-->
 
 
 <!--At the nav:-->
 
 <li><a href="#sec-1">text</a></li> 
<li><a href="#sec-2">text2</a></li> 
<li><a href="#sec-3">text3</a></li>

赞(0）回复(0）举报 2023-01-12

az31mfrm2#

〉它会在标题下重定向*

把标题放在章节部分，而不是之前。

**

菜单未"自动"关闭。

**

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <nav>
      <li>
        <a href="#" id="sub-click" onclick="show()" >menu1</a>
        <ul id="sub-menu" onclick="hide()">
          <li>sub-menu</li>
          <li>sub-menu2</li>
          <li>sub-menu3</li>
        </ul>

      </li>
      <li>menu2</li>
      <li>menu3</li>
      <li>menu4</li>
    </nav>
<script>
function hide(){
document.getElementById('sub-menu').style.display = "none";

}
function show(){
  document.getElementById('sub-menu').style.display = "block";

}

</script>

  </body>
</html>

赞(0）回复(0）举报 2023-01-12

kmpatx3s3#

Deyan这将工作现在：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      #navbar{

          position:sticky;
          top:0;

          background-color: red;
      }
      section{
        height: 100vh;
        background-color: blue;

      }

    </style>
  </head>
  <body  onmousemove="visible()">
    <nav id="navbar">
      <li>
        <a href="#" id="sub-click" onclick="show()" >menu1</a>
        <ul id="sub-menu" onclick="hide();transparent()">
          <li><a href="#one">sub-menu</a></li>
          <li><a href="#two">sub-menu2</a></li>
          <li><a href="#three">sub-menu3</a></li>
        </ul>

      </li>
      <li>menu2</li>
      <li>menu3</li>
      <li>menu4</li>
    </nav>
    <section id="one">
      <h1>bla la</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
         aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
          voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sin
          t occaecat cupidatat non proident, sunt in culpa qui officia deserunt molli
          t anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
             Excepteur sint occaecat cupidatat non proident,
             sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
    <section id="two">
      <h1>bla la</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
         aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
          voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sin
          t occaecat cupidatat non proident, sunt in culpa qui officia deserunt molli
          t anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
             Excepteur sint occaecat cupidatat non proident,
             sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
    <section id="three">
      <h1>bla la</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
         aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
          voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sin
          t occaecat cupidatat non proident, sunt in culpa qui officia deserunt molli
          t anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
             quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
             Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
             Excepteur sint occaecat cupidatat non proident,
             sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
<script>
function hide(){
document.getElementById('sub-menu').style.display = "none";

}
function show(){
  document.getElementById('sub-menu').style.display = "block";

}
function transparent(){

  document.getElementById('navbar').style.opacity="0.0";
}
function visible(){

  document.getElementById('navbar').style.opacity="1.0";
}
</script>

  </body>
</html>

标题是透明的，直到你移动鼠标。你可以改变事件（onmousemove），如果你想的话，在body标签。

赞(0）回复(0）举报 2023-01-12

我来回答

使用HTML/jQuery重定向到页面的特定部分

3条答案

相关问题

热门标签

最新问答