這個讓步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
默認情況下如何隱藏它?它可能是默認隱藏的_li_,也不是錨_a_。 –
使用了一些CSS。添加了用於隱藏鏈接的cs代碼 –
請向我們展示css。 –