jQuery切換顯示css屬性

Question

我正試圖讓我的一個鏈接動態顯示何時點擊錨點href鏈接。

用於顯示cats鏈接的JavaScript代碼，但它沒有顯示cats鏈接，如下所示：

 $(".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 1

你需要display:hidden為#cat默認CSS，然后是$("#cat").show()將生效。 如果你想讓按鈕切換顯示狀態，那么使用$("#cat").toggle()

Answer 2

如果沒有動態生成，您的代碼應該有效，如果是這樣，您應該on()使用事件委托：

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

注意：確保您的代碼由ready函數包裝。

希望這可以幫助。

 $(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();默認隱藏頁面加載 鏈接 $("#cat").hide(); 在$(document).ready(function(){}

檢查代碼段。 希望這可以幫助

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

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

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();
});

這是一個打開按鈕點擊貓鏈接的codepen： http ：//codepen.io/scottohara/pen/VbYyGr

Answer 6

你在html文件中添加了jQuery Cdn嗎？

<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>

或者您也可以使用它來隱藏。

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