HTML-элементы, скрытые с помощью jQuery, больше не будут появляться при клике по ссылке - PullRequest
Новая
       14

HTML-элементы, скрытые с помощью jQuery, больше не будут появляться при клике по ссылке

0 голосов
/ 12 октября 2011

У меня есть страница с несколькими элементами div, которые содержат различные разделы контента. Первоначально содержание домашней страницы установлено на .active, а все остальное скрыто. Если щелкнуть ссылку в навигационной панели, текущий активный контент должен исчезнуть, а новый контент должен исчезнуть.

В настоящее время это работает почти идеально. Тем не менее, любые текстовые ссылки в любом из содержимого div невидимы (изображения, обернутые ссылкой, отображаются нормально). Текстовые ссылки, хотя они и невидимы, можно нажимать, если навести указатель мыши на пустое место, где должна отображаться ссылка.

Пример 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>

Как я могу изменить это так, чтобы ссылки (и другой возможный контент, который также может быть затронут этой ошибкой, которую я еще не нашел) в разделах контента были видны? Спасибо

EDIT: Вот ссылка на живой сайт: http://uoflusli.com/index_off.php

1 Ответ

2 голосов
/ 12 октября 2011

Проблема в том, что ссылки получают стиль a:-webkit-any-link и отображаются так же, как фон. Трудно видеть вещи без цвета.

Эту проблему легко найти. Используйте Chrome, затем щелкните правой кнопкой мыши по ссылке и выберите элемент проверки - CSS-каскад разоблачен (каламбур).

Удачи.

...