如何使用隐藏属性值转到标签上的 href？答案

【问题标题】：How can I go to href on tag with hide attribute value?如何使用隐藏属性值转到标签上的 href？
【发布时间】：2021-08-12 00:35:27
【问题描述】：

如何使用隐藏属性值转到标签上的 href？这是我的导航栏

$(function() {
  $('#p10').hide();
  $('#p11').hide();
  $('#p12').hide();
  $('#p13').hide();
  $('#p14').hide();
  $('#p15').hide();
  $('#p16').hide();
  $('#p17').hide();
  $('#p18').hide();
  $('#p19').hide();
  $('#p20').hide();
  $('#p21').hide();

  $('#hideshow').click(function() {
    $('#p10').toggle();
    $('#p11').toggle();
    $('#p12').toggle();
    $('#p13').toggle();
    $('#p14').toggle();
    $('#p15').toggle();
    $('#p16').toggle();
    $('#p17').toggle();
    $('#p18').toggle();
    $('#p19').toggle();
    $('#p20').toggle();
    $('#p21').toggle();
  });

  $('#navbarNav').click(function() {
    console.log($(this));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link " href="#section2">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#p1">Subway congestion prediction app</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#p2">Image classification</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#p3">Community site</a>
    </li>
...
    <li class="nav-item">
      <a class="nav-link" href="#p17">Assembly</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#p18">Data structure</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#p19">Concave</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#p20">Contact</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section5">Contact</a>
    </li>
  </ul>
</div>

这里加载页面时，p10到p21是隐藏的。

在这种情况下，如果你点击导航栏的10到21，它是隐藏的，你不能移动到href。

导航栏点击p10到p21时如何去掉hide属性（隐藏属性时点击#hideshow按钮）移动到p10到p21？

<button type="button" class="btn btn-dark btn-lg " style="font-size:3rem; margin-bottom:100px; background-color:#3e454e" id="hideshow">Want to see more?</button>

#showhide 按钮在#p9 #p10 之间

【问题讨论】：

您尝试使用 jQuery ID (10 - 21) 进行选择，但 HTML 不包含这些 ID。此外：点击事件监听器被分配给ID为#hideshow但不存在的元素。
如果你看到一个重复的模式——比如十几个几乎相同的“按 ID 选择”——你可以缩短你的代码。我建议用一个类标记所有这些元素，然后只写 $('.all_these_items').toggle() .. 除非你将 nav-link 类用于其他你可以写的东西 $('.nav-link') .toggle() .. 实际上 - 为什么不只是做 $('#navbarNav').toggle() - 或者如果您需要 navbarNav 容器进行某些页面布局，请创建一个容器来切换！？！？！

标签： javascript html jquery

【解决方案1】：

jquery-selector是这样使用的：

$('#<id>').hide();

-><id>（# 之后）必须是元素的 id。在您的 HTML 中，它是给定的 href。在您给定的代码中，缺少#hideshow 按钮。

【讨论】：

【解决方案2】：

您尝试使用 jQuery ID (10 - 21) 进行选择，但 HTML 不包含这些 ID。此外：点击事件监听器被分配给不存在的按钮#hideshow。

如果您定义 ID 并添加按钮 #hideshow 它可以工作：

$(function() {
  $('#p10').hide();
  $('#p11').hide();
  $('#p12').hide();
  $('#p13').hide();
  $('#p14').hide();
  $('#p15').hide();
  $('#p16').hide();
  $('#p17').hide();
  $('#p18').hide();
  $('#p19').hide();
  $('#p20').hide();
  $('#p21').hide();

  $('#hideshow').click(function() {
    $('#p10').toggle();
    $('#p11').toggle();
    $('#p12').toggle();
    $('#p13').toggle();
    $('#p14').toggle();
    $('#p15').toggle();
    $('#p16').toggle();
    $('#p17').toggle();
    $('#p18').toggle();
    $('#p19').toggle();
    $('#p20').toggle();
    $('#p21').toggle();
  });

  $('#navbarNav').click(function() {
    console.log($(this));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link " href="#section2">Home</a>
    </li>
    <li id="1p17" class="nav-item">
      <a class="nav-link" href="#p1">Subway congestion prediction app</a>
    </li>
    <li id="p2" class="nav-item">
      <a class="nav-link" href="#p2">Image classification</a>
    </li>
    <li id="p3" class="nav-item">
      <a class="nav-link" href="#p3">Community site</a>
    </li>
...
<button type="button" id="hideshow">Want to see more?</button>
...
    <li id="p17" class="nav-item">
      <a class="nav-link" href="#p17">Assembly</a>
    </li>
    <li id="p18" class="nav-item">
      <a class="nav-link" href="#p18">Data structure</a>
    </li>
    <li id="p19" class="nav-item">
      <a class="nav-link" href="#p19">Concave</a>
    </li>
    <li id="p20" class="nav-item">
      <a class="nav-link" href="#p20">Contract</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section5">Contact</a>
    </li>
  </ul>
</div>

【讨论】：