Функция JavaScript прекрасно работает в Opera, но совсем не работает в Firefox. Зачем? - PullRequest
Новая
       10

Функция JavaScript прекрасно работает в Opera, но совсем не работает в Firefox. Зачем?

1 голос
/ 15 сентября 2009

Это моя функция JavaScript: 

function switch_div(firstID,secondID) {

    if((document.getElementById(firstID).style.display  == 'inline') &&
       (document.getElementById(secondID).style.display == 'inline')) {
       document.getElementById(firstID).style.display = 'none';

    } else if(document.getElementById(firstID).style.display == 'inline'){
       document.getElementById(firstID).style.display  = 'none';
       document.getElementById(secondID).style.display = 'inline';

    } else if (document.getElementById(firstID).style.display == 'none') {

       document.getElementById(firstID).style.display  = 'inline';
       document.getElementById(secondID).style.display = 'none';
    }
}

А это моя ссылка и две я хочу переключиться между ними, нажимая одну и ту же ссылку каждый раз: 

<a href="#" onclick="switch_div('first_choice','second_choice');return false" style="position:relative">

<div id="first_choice" style="position:relative;">hello</div>

<div id="second_choice" style="position:relative;">bye</div>

Эта ссылка на функцию JavaScript отлично работает в Opera, но не в все в Firefox. Почему это так?

Ответы [ 2 ]

3 голосов
/ 15 сентября 2009

Я не вижу кросс-браузерной проблемы: для меня это тоже не работает в Opera. Это не слишком удивительно: вы проверяете атрибут «style» для встроенного отображения, но ни у одного из div нет там «display: inline».

В любом случае, inline - это не обычная модель отображения для div, у вас обычно есть block.

Предлагайте: 

<style type="text/css">
    .hidden { display: none; }
</style>

<a href="#first_choice" id="togglelink">Clickety</a>
<div id="first_choice">
    blah 1
</div>
<div id="second_choice">
    blah 2
</div>

<script type="text/javascript">
    function hideToggler(link, a, b) {
        var state= link.hash.substring(1)==a.id; // set which div is shown initially from the link destination
        link.onclick= function() { // toggle divs
            state= !state;
            a.className= state? 'hidden' : '';
            b.className= state? '' : 'hidden';
            return false;
        };
        link.onclick(); // hide one of the divs to begin with
    }

    hideToggler(
        document.getElementById('togglelink'),
        document.getElementById('first_choice'),
        document.getElementById('second_choice')
    );
</script>
2 голосов
/ 15 сентября 2009

Предоставлены атрибуты стиля отображения для обоих div. Лучше давать их на занятиях. Надеюсь, это то, что вы искали. 

<a href="#" onclick="switch_div('first_choice','second_choice');return false" style="position:relative">
<div id="first_choice" style="position:relative;display: inline">hello</div>
<div id="second_choice" style="position:relative;display: none">bye</div>

<script>

function switch_div(firstID,secondID) 
{ 

        if((document.getElementById(firstID).style.display == 'inline') && (document.getElementById(secondID).style.display == 'inline'))
    {

        document.getElementById(firstID).style.display = 'none';
    }

        else if(document.getElementById(firstID).style.display == 'inline')
    {

            document.getElementById(firstID).style.display = 'none';

            document.getElementById(secondID).style.display = 'inline';
    }

        else if (document.getElementById(firstID).style.display == 'none') 
    {

          document.getElementById(firstID).style.display = 'inline';

          document.getElementById(secondID).style.display = 'none';
    }
}

</script>

Рабочая демоверсия: http://jsbin.com/iqeli/

...