Question

我试图让我的一个链接在点击锚点href链接时动态显示。

用于显示cats链接的JavaScript代码，但它没有显示cats链接，如下所示：

＆＃13;

$(".button").click(function() {
  $("#cat").show();
});

＆＃13;

ul > li > #cat {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li><a href="index.html">Dogs</a></li>
  <li><a id="cat" href="javascript:void(0);">Cats</a></li>
</ul>

<p>Cool cats are stored here</p>
<a href="javascript:void(0);" class="button">Press here to enable Cats</a>

＆＃13;

Answer 1

您需要display:hidden作为#cat的默认CSS，然后$("#cat").show()才会生效。如果您希望按钮切换节目状态，请使用$("#cat").toggle()

Answer 2

如果没有动态生成，您的代码应该有效，如果是这样，您应该使用事件委派on()：

$("body").on("click", ".button", function() {
   $("#cat").show();
});

注意：确保您的代码由就绪函数包装。

希望这有帮助。

$(function(){
  $(".button").click(function() {
    $("#cat").show();
  });
});

ul > li > #cat {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li><a href="index.html">Dogs</a></li>
  <li><a id="cat" href="javascript:void(0);">Cats</a></li>
</ul>

<p>Cool cats are stored here</p>
<a href="javascript:void(0);" class="button">Press here to enable Cats</a>

Answer 3

尝试以下代码

CSS

ul > li > #cat {
  display: none;
}

JQUERY

$(".button").click(function() {
  $("#cat").toggle();
});

以下是工作代码：https://jsfiddle.net/u0ajrpw0/2/

Answer 4

默认情况下，您可以使用$("#cat").hide();

中的$(document).ready(function(){}隐藏页面加载上的链接

检查代码段。希望这有帮助

＆＃13;

$(document).ready(function(){
  $("#cat").hide();
$(".button").click(function() {
    $("#cat").show();
});
});

＆＃13;

<ul>
    <li><a href="index.html">Dogs</a></li>
    <li><a id="cat" href="javascript:void(0);">Cats</a></li>
</ul>

<p>Cool cats are stored here</p>
<a href="javascript:void(0);" class="button">Press here to enable Cats</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

＆＃13;

Answer 5

在codepen中给出一个快速演示，下面的代码（和codepen示例）将是我设置你想要做的事情。

HTML：

<ul>
  <li>
    <a href="dogs.html">
      Dogs
    </a>
  </li>
  <!-- you want to hide the LI, because if you hide the <a>, then
       there will be an empty <li> that you'll need to deal with in
       the layout of your page / screen reader users may end up
       wondering why there is an empty list item
   -->
  <li id="cats_item" class="display-none">
    <a href="cats.html">
      Cats
    </a>
  </li>
</ul>

<p id="reveal_message">
  Reveal a link to cats via the following button:
  <!--
    Use a button here since you're triggering an action
    on the page, and not actually linking anywhere.
  -->
  <button type="button" id="reveal_button">
    Reveal Cats
  </button>
</p>

CSS

/* this is all you need to hide any element */
.display-none {
  display: none;
}

jQuery

$('#reveal_button').on('click', function () {
  // reveal the LI that contains the cats link
  $('#cats_item').show();
  /* hide the reveal message, since cats is shown, 
     this no longer has any usefulness (or change the message 
     and action to a 'toggle' to show/hide the cat link
  */
  $('#reveal_message').hide();
  /* 
    move keyboard focus to the cats link, otherwise
    keyboard users would have to traverse back up the
    DOM to get to the newly revealed link
  */
  $('#cats_item a').focus();
});

这是一个在按钮点击时显示cat链接的codepen： http://codepen.io/scottohara/pen/VbYyGr

Answer 6

您是否在html文件中添加了jQuery Cdn？

$('#cat').hide();

或者您也可以使用此隐藏。

'void android.view.SurfaceHolder.unlockCanvasAndPost(android.graphics.Canvas)'

jQuery切换显示css属性

6 个答案: