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

あなたは$("#cat").show()があります、#catのデフォルトCSSとしてdisplay:hiddenが必要になります効果。あなたがショーの状態を切り替えるためのボタンはその後、動的に生成されていない場合ので、あなたがイベントの委任on()を使用する必要がある場合$("#cat").toggle()は

Answer 2

あなたのコードは、動作するはず使いたい場合：

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

あなたはスニペットをチェック$(document).ready(function(){}

で$("#cat").hide();を使用して、デフォルトでリンク上のページのロードを非表示にすることができます。これは、このにcodepenで迅速なデモを与える

$(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例）私はあなたが何をしようとして設定したいどのようになります。

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