Javascript IE против реализаций Firefox style.visibility - PullRequest
Новая
       1

Javascript IE против реализаций Firefox style.visibility

0 голосов
/ 20 июля 2011

Я уверен, что это плохой надзор с моей стороны, но я надеюсь, что кто-то может объяснить правильный способ использования .style.visibility / .style.display таким образом, чтобы он работалIE и Firefox.

По сути, у меня есть пользовательский элемент управления вкладками.Первая вкладка имеет собственный элемент управления MP3-плеером.Когда пользователь нажимает на другую вкладку, музыка должна продолжать играть, даже если она больше не видна.

В IE это работает так, как объявлено, но в Firefox, когда пользователь нажимает на другую вкладку, музыка останавливается и элемент управления сбрасывается в исходное состояние.

//<summary>
// Display or hide relevent div areas.
//</summary>
//<param name="divId">The id of the viewable div</param>
function toggleDiv(divId) {
    var elems = new Array("0", "1", "2", "3");
    var hdnView = document.getElementById('<%=hdnCurrentDiv.ClientID %>');

    for (div in elems) {
        var elem = document.getElementById(div);

        if (div == divId) {
            elem.style.display = 'block';
            elem.style.visibility = 'visible';
            hdnView.value = divId;
            //highlightSelection(elem);
        }
        else {
            elem.style.display = 'none';
            elem.style.visibility = 'hidden';
        }
    }
}

Как заставить Firefox вести себя как IE в том, что когда пользователь нажимает на вкладку, игрок на ранее выбранной вкладке продолжает играть и просто делает этот div невидимым?

Ответы [ 3 ]

2 голосов
/ 20 июля 2011

Вместо того, чтобы показывать / скрывать, вы можете установить непрозрачный цвет фона каждой вкладки, расположить их абсолютно друг над другом и изменить их z-индекс, чтобы вывести нажатую вкладку на вершину стека.

Таким образом, у вас не будет проблем с уничтожением / сбросом элементов.И вам не нужно менять положение каждый раз, когда нажимается другая вкладка.Все, что вам нужно сделать, это изменить z-index ...

быстрый пример: 

<html>
<head>
    <style>
    ul
    {
        list-style: none;
    }
    li
    {
        display: inline;
    }
    #Tab1, #Tab2
    {
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }
    </style>
    <script>
    function toggleTab( tabID )
    {
        for( var i = 1; i<= 2; i++ )
        {
            var id = "Tab" + i;
            if( id != tabID )
            {
                document.getElementById(id).style.zIndex = "1";
            }
        }

        document.getElementById(tabID).style.zIndex = "2";
    }
    </script>
</head>
<body>
    <ul>
        <li>
            <a href="javascript:toggleTab('Tab1');">Link 1</a>
        </li>
        <li>
            <a href="javascript:toggleTab('Tab2');">Link 2</a>
        </li>
    </ul>
    <div style="position: relative;" id="allTabs">
        <div id="Tab1">
            Tab 1...
        </div>
        <div id="Tab2">
            Tab 2...
        </div>
    </div>
</body>
</html>
1 голос
/ 20 июля 2011

Если вы установите display = 'none', firefox уничтожит музыкальный проигрыватель. Ваши альтернативные варианты:

  • Просто установите visibility = 'hidden';
  • Расположите элементы в абсолютном порядке и переместите их куда-нибудь подальше, вместо того, чтобы прятаться (-10000, -10000 - хорошее место для старта)
0 голосов
/ 20 июля 2011

Да,

display = none удалит элемент и все дочерние элементы из документа

visibility = скрытый элемент и дочерние элементы невидимы, но элемент существует на странице и занимает место

Вы можете установить видимость скрытым, а ширину и высоту - 1px или расположить где-нибудь на странице, как полуотображение нет.

...