Jquery;показать / скрыть не работает в IE, работает в других браузерах - PullRequest
Новая
       12

Jquery;показать / скрыть не работает в IE, работает в других браузерах

1 голос
/ 29 марта 2011

Хорошо, ниже приведена часть кода, который я использую для этого сайта. он должен быть там, где вы нажимаете на изображение, и он «показывает» div, который был спрятан ранее. Затем, когда вы нажимаете другое изображение, оно скрывает открытый в настоящий момент div и показывает новое. он работает в любом браузере, кроме IE (конечно), и я не уверен, что я сделал не так со скриптом, помогите пожалуйста? 

<div class="content">
<table width="100%" border="0">
<tr>
  <td align="center">
    <a id="1" href="#"><img src="..." width="100" height="92" alt="1" /></a>
    <a id="2" href="#"><img src="..." width="100" height="70" alt="2" /></a>
    <a id="3" href="#"><img src="..." width="100" height="112" alt="3" /></a>
    <a id="4" href="#"><img src="..." width="100" height="65" alt="4" /></a> 
    <a id="5" href="#"><img src="..." width="100" height="141" alt="5" /></a>
    </td>
  </tr>
</table>
</div>

<div id="frame1">
  <button>close</button>
  <iframe src="..." width="100%" height="100%">
    <p>Your browser does not support iframes.</p>
</iframe>
</div>
<div id="frame2">
  <button>close</button>
  <iframe src="..." width="100%" height="100%">
    <p>Your browser does not support iframes.</p>
  </iframe>
</div>
<div id="frame3">
  <button>close</button>
  <iframe src="..." width="100%" height="100%">
    <p>Your browser does not support iframes.</p>
</iframe>
</div>

и т.д ... 

<script>
//controller for first site
$("a#1").click(function () {
    $("#frame2,#frame3,#frame4,#frame5").hide("fast");
    $("#frame1").show("slow");
});
//controller for second site
$("a#2").click(function () {
    $("#frame1,#frame3,#frame4,#frame5").hide("fast");
    $("#frame2").show("slow");
});
//controller for third site
$("a#3").click(function () {
    $("#frame1,#frame2,#frame4,#frame5").hide("fast");
    $("#frame3").show("slow");
});
//controller for fourth site
$("a#4").click(function () {
    $("#frame1,#frame2,#frame3,#frame5").hide("fast");
    $("#frame4").show("slow");
});
//controller for fifth site
$("a#5").click(function () {
    $("#frame1,#frame2,#frame3,#frame4").hide("fast");
    $("#frame5").show("slow");
});
//button close frames
$("button").click(function () {
    $("#frame1,#frame2,#frame3,#frame4,#frame5").hide("fast");
});
</script>

и, конечно же, css для div'ов кадра должно было быть "display: none;" чтобы это работало.

Ответы [ 5 ]

2 голосов
/ 29 марта 2011 
$(document).ready(function() {
  $("a#1").click(function () {
    $('div[id~="frame"]').css({"display":"none"}); //hides all divs with id containing "frame"
    $("#frame1").show("slow");
  });
});

Примечание: Вы не очень хорошая практика.

Элементы ID и NAME должны начинаться с буквой, т.е. заглавными буквами от А до Я или строчные буквы от А до Я; число не позволил. После первой буквы любой количество букв (от А до Я, от А до Я), цифры (от 0 до 9), дефисы (-), подчеркивания (_), двоеточия (:) и периоды (.) разрешены.

0 голосов
/ 29 марта 2011

Я думаю, вам следует попробовать указать значения идентификаторов ссылок, которые не начинаются с цифр. Номера недопустимы для идентификатора начала и атрибутов NAME , но они могут использоваться после начального символа.

Кроме того, могу ли я предложить вам написать что-то вроде: 

$('div.content a[href="#"]').click(function(){
    // I'm assuming that you'll be changing the ID of the link,
    // so we'll use the IMG instead
    var num = $(this).find('img').attr('alt');

    $('iframe').not('#iframe'+num).hide('fast')
               .end().filter('#iframe'+num).show('slow');
});

Таким образом, у вас есть только этот небольшой кусок кода, который заботится обо всем этом повторяющемся коде, который обрабатывает поведение IFRAME show / hide. Просто настройте его, как вам хотелось бы.

0 голосов
/ 29 марта 2011

Поместили ли вы свой код jQuery в документ готовый блок ? Вроде как так: 

$(document).ready(function() {
$("a#1").click(function () {
    $("#frame2,#frame3,#frame4,#frame5").hide("fast");
    $("#frame1").show("slow");
});
});

У меня тоже была эта проблема, когда Firefox смог загрузить мои файлы JavaScript перед выполнением. У IE было немного больше проблем с этим.

Редактировать: Попробуйте использовать текстовый идентификатор для ваших ссылок. например: 

<a id="link1" href="...">link text</a>

Идентификаторы не должны начинаться с цифр, поэтому в IE могут возникнуть проблемы с этим.

0 голосов
/ 29 марта 2011

Просто попробуйте следующий код, но не уверен, 

$("a#1").live('click', function(event) {//hide and show}
0 голосов
/ 29 марта 2011

Я помню, что у меня была похожая проблема ... Сокрытие ВСЕХ, а затем показ одного исправило проблему для меня ... так что просто попробуйте с 

//controller for first site
$("a#1").click(function () {
    $("#frame1,#frame2,#frame3,#frame4,#frame5").hide("fast");
    $("#frame1").show("slow");
});

и попробуйте использовать другой идентификатор, а не перечисление

...