如何使用隐藏属性值转到标签上的 href ? [英] How can I go to href on tag with hide attribute value?

问题描述

如何使用隐藏属性值转到标签上的 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">首页</a><li class="nav-item"><a class="nav-link" href="#p1">地铁拥堵预测应用</a><li class="nav-item"><a class="nav-link" href="#p2">图片分类</a><li class="nav-item"><a class="nav-link" href="#p3">社区站点</a>...<li class="nav-item"><a class="nav-link" href="#p17">Assembly</a><li class="nav-item"><a class="nav-link" href="#p18">数据结构</a><li class="nav-item"><a class="nav-link" href="#p19">凹面</a><li class="nav-item"><a class="nav-link" href="#p20">联系方式</a><li class="nav-item"><a class="nav-link" href="#section5">联系方式</a>

在此处加载页面时，p10 到 p21 是隐藏的.

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

点击导航栏的p10到p21时(点击hide属性时的#hideshow按钮)时如何去掉hide属性，移动到p10到p21?

#showhide 按钮位于 #p9 #p10

之间

解决方案

您尝试使用 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">首页</a><li id="1p17" class="nav-item"><a class="nav-link" href="#p1">地铁拥堵预测应用</a><li id="p2" class="nav-item"><a class="nav-link" href="#p2">图片分类</a><li id="p3" class="nav-item"><a class="nav-link" href="#p3">社区站点</a>...<button type="button" id="hideshow">想看更多吗?</button>...<li id="p17" class="nav-item"><a class="nav-link" href="#p17">Assembly</a><li id="p18" class="nav-item"><a class="nav-link" href="#p18">数据结构</a><li id="p19" class="nav-item"><a class="nav-link" href="#p19">凹面</a><li id="p20" class="nav-item"><a class="nav-link" href="#p20">合同</a><li class="nav-item"><a class="nav-link" href="#section5">联系方式</a>

How can I go to href on tag with hide attribute value? here is my navigation bar

$(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>

When loading the page here, p10 to p21 are hidden.

In this situation, if you click from 10 to 21 of the navigation bar, it is hidden and you cannot move to href.

How can I remove the hide attribute when clicking p10 to p21 of the navigation bar (click the #hideshow button at the time of the hide attribute) and move to p10 to 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 button is between #p9 #p10

解决方案

You try to select with jQuery IDs (10 - 21) but the HTML doesn't contain these IDs. Furthermore: The click event listener is assigned to the button #hideshow which doesn't exist.

If you define the IDs and add the button #hideshow it works:

$(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>

这篇关于如何使用隐藏属性值转到标签上的 href ?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！