0

Хорошо, поэтому я пытаюсь составить список ссылок и в зависимости от выбранной вами ссылки отобразит другой контейнер div. Я хочу, чтобы он показывал только один div. У меня есть код, и он работает, как хотелось бы, однако, когда я загружаю его в IE, это не сработает. Я слышал, что в этом играют роль журналы. Как сделать этот код совместимым с IE, и если у вас есть другое решение, которое будет работать, я тоже откроюсь, чтобы услышать его.JQuery не работает в IE7?

Мой код:

<head> 
    <title>Example</title> 
    </head> 
    <body> 

    <!--Footer and Navigation Div's--> 
    <div id="bg"><img src="images/bg.jpg" alt=""></div> 
     <div id="footer"> 
      <p><span>Menu</span></p> 
       <div id="nav"> 
        <ul><a href="#">Link 1</a></ul> 
        <ul><a href="#">Link 2</a></ul> 
        <ul><a href="#">Link 3</a></ul> 
        <ul><a href="#">Link 4</a></ul> 
       </div> 
     </div> 

    <!--END Footer and Navigation Div's--> 

    <div class="parent"> 
     <div class="a"> 
      <p>this is a</p> 
     </div> 
     <div class="b"> 
      <p>this is b</p> 
     </div> 
     <div class="c"> 
      <p>this is c</p> 
     </div> 
     <div class="d"> 
      <p>this is d</p> 
     </div> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script> 
    $('.parent div').hide(); 

    $('#nav a').click(function() { 
     console.log($(this).index('a')); 
     var $div = $('.parent > div').eq($(this).index('#nav a')); 
     $div.show(); 
     $('.parent > div').not($div).hide(); 
    }); 
    </script> 
    </body> 
    </html> 
+1

Что вы наблюдать, когда он не работает так, как вы» ожидание? –

+2

Вы также должны указать версию IE –

+2

Вы также должны использовать более обновленную версию jquery, 1.4.2 довольно старая –

ответ

-2

Это самое первое, что вы должны знать о JQuery. Всегда используйте $ (документ) .ready ... Пример:

<script> 
    $(document).ready(function() { 
     $('.parent div').hide(); 

     $('#nav a').click(function() { 
      console.log($(this).index('a')); 
      var $div = $('.parent > div').eq($(this).index('#nav a')); 
      $div.show(); 
      $('.parent > div').not($div).hide(); 
     }); 
    }); 
</script> 
+2

Поскольку их javascript находится в конце документа, '$ (document) .ready' не имеет значения здесь –

+1

это может быть комментарий –

+2

Пожалуйста, уточните, почему это не имеет значения? DOM загружается при запуске этого скрипта, но вся страница по-прежнему загружается. –

-2

попробовать

$('#nav a').live('click',function() { 

или

$('#nav a').bind('click',function() { 
+0

Где я бы это сказал? Это мой первый раз, когда я использовал JQuery. – user5166162

+0

$ ('# nav a'). Live ('click', function() { –

+3

'.live' устарел, он будет устаревшим. Не используйте его. – casraf