Блог

Главная - Вопросы по программированию - Как создать ссылку на панели навигации в начальной загрузке нажмите в Java-скрипте

Как создать ссылку на панели навигации в начальной загрузке нажмите в Java-скрипте

#javascript #bootstrap-4

Вопрос:

У меня есть панель навигации со ссылками, которые ведут к разным частям моей веб-страницы, я хочу, чтобы в JavaScript я сделал команду, и ссылка будет нажата, и веб-страница будет изменена.

Моя Панель Навигации

 // Current JavaScript Method (Not Working)
document.getElementById("section2Button").click(); 
 <nav class="navbar navbar-expand-sm bg-primary navbar-dark justify-content-center fixed-top">
  <ul class="navbar-nav">
    <li id="section1Button" class="nav-item">
      <a class="nav-link" href="#section1">Colleges</a>
    </li>
    <li id="section2Button" class="nav-item">
      <a class="nav-link" href="#section2">College Selected</a>
    </li>
    <li id="section3Button" class="nav-item">
      <a class="nav-link" href="#section3">About Me</a>
    </li>
  </ul>
</nav>

Комментарии:

1. Вместо ссылки на якорь установите ссылку на другую страницу, т. е. href="https://google.com"

2. Эй, блурфус, спасибо за ваше предложение,но я хочу, чтобы раздел изменений был на той же странице, поэтому в основном я хочу, чтобы веб-страница прокрутилась вниз до раздела веб-страницы,

3. затем вам нужно создать эти якоря на своей странице. т. е. <h2 id="section3">Section 3</h2> — см. developer.mozilla.org/en-US/docs/Web/HTML/Element/a

4. Да, я понимаю, что вам нужно создавать якоря, но как я могу щелкнуть по ним в Javascript?

5. не уверен, что я понимаю, почему вам нужно нажимать на них через JS, но если вы это сделаете, вам нужно добавить прослушиватель событий — см. Ответ

Ответ №1:

 document.querySelector("#section2Button a").click();

Вам нужно сделать запрос к тегу. И вы можете поместить его в любую функцию, которую хотите выполнить. Например, я помещаю это действие в кнопку.

Вы можете увидеть полную демонстрацию здесь.

 function your_command() {
   // Fixed query
   document.querySelector("#section2Button a").click();
} 
 <button onclick="your_command()">Test command</button>

<nav class="navbar navbar-expand-sm bg-primary navbar-dark justify-content-center fixed-top">
  <ul class="navbar-nav">
    <li id="section1Button" class="nav-item">
      <a class="nav-link" href="#section1">Colleges</a>
    </li>
    <li id="section2Button" class="nav-item">
      <a class="nav-link" href="#section2">College Selected</a>
    </li>
    <li id="section3Button" class="nav-item">
      <a class="nav-link" href="#section3">About Me</a>
    </li>
  </ul>
</nav>

<h2 id="section1">Section 1</h2>
<h2 id="section2" style="margin-top: 100px">Section 2</h2>
<h2 id="section3" style="margin-top: 100px">Section 3</h2>

Ответ №2:

Вам нужно добавить прослушиватель событий.

 var htmlElement = document.getElementById("section2Button");

htmlElement.addEventListener('click', function() {
  console.log('clicked');
});

смотрите демонстрацию

 var htmlElement = document.getElementById("section2Button");

htmlElement.addEventListener('click', function() {
  console.log('clicked');
}); 
 <nav class="navbar navbar-expand-sm bg-primary navbar-dark justify-content-center fixed-top">
  <ul class="navbar-nav">
    <li id="section1Button" class="nav-item">
      <a class="nav-link" href="#section1">Colleges</a>
    </li>
    <li id="section2Button" class="nav-item">
      <a class="nav-link" href="#section2">College Selected</a>
    </li>
    <li id="section3Button" class="nav-item">
      <a class="nav-link" href="#section3">About Me</a>
    </li>
  </ul>
</nav>

Комментарии:

1. обязательно посмотрите на ответ @tartarus — он предлагает другое решение, которое может лучше удовлетворить ваши потребности 🙂

2. Понял, спасибо вам, ребята, за помощь

Метки: