jQuery切換顯示CSS屬性

Question

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

的JavaScript代碼，顯示貓的鏈接，但它沒有顯示貓鏈接如下：

$(".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();的鏈接在$(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();