HTML elements hidden with jQuery will not reappear on link click
I have a page with multiple divs that hold different sections of content. Initially, the home page content is set to .active and everything else is hidden. Once a link is clicked in the nav bar, the current active content is to fade out and the new content is to fade in.
Currently, this works almost perfectly. However, any text links in any of the content divs are invisible (images that are wrapped with a link show up fine). The text links, although invisible, are clickable if you move your mouse over the empty space where the link should show up.
Example HTML:
<body>
<div class="content_wrapper">
<div id="nav">
<ul id="navlist">
开发者_JAVA技巧 <a id="about" class="showHideLink"><li>ABOUT</li></a>
<a id="media" class="showHideLink"><li>MEDIA</li></a>
<a id="blog" class="showHideLink"><li>BLOG</li></a>
</ul>
</div>
<div id="page-wrap">
<!-- Content -->
<div id="home-content" class="section active">
<h1>WELCOME</h1>
Welcome to our site!<br />
Check out our YouTube channel: <a href="http://www.youtube.com/user/Foo/" target="_blank">Here</a><!-- **This link is invisible** -->
</div>
<div id="about-content" class="section">
<h1>About</h1>
About Us. [<a href="#citation1" alt="Citation Link">1</a>]<!-- **This link is invisible** --><br />
<br />
[<a id="citation1">1</a>] <a href="mycitation.html" target="_blank">Citation Title</a> <!-- **This link is invisible** -->
</div>
</div>
</div>
</body>
Javascript:
<script type='text/javascript'>
$(document).ready(
function() {
$(".section").hide();
$(".active").fadeIn();
$("a.showHideLink").click(function(){
var _contentId = '#' + $(this).attr('id') + "-content";
if(!$(_contentId).hasClass("active") && $(_contentId).length)
{
$(".active").stop().fadeToggle(function(){
$(".active").removeClass("active");
$(_contentId).fadeToggle();
$(_contentId).addClass("active");
}
);
}
});
});
</script>
How can I change this so that links (and other possible content that may also be affected by this bug that I haven't found yet) in the content sections are visible? Thanks
EDIT: Here is a link to the live site: http://uoflusli.com/index_off.php
The problem is those links are getting the style of a:-webkit-any-link and is rendered the same as the background. Hard to see things without a color.
This issue is easy to find. Use Chrome, then right click on the link and select inspect element -- the CSS cascade is laid bare (pun intended).
Good Luck.
加载中,请稍侯......
精彩评论