Home/ Questions/Q 6680101
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T04:26:08+00:00

I have a page with multiple divs that hold different sections of content. Initially,

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0