Javascript/HTML Toggle Visibility (автоматически скрывает один элемент div, когда другой становится видимым)

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

Проблема, с которой я сталкиваюсь, заключается в следующем: предположим, что домашняя страница при первом посещении веб-сайта пуста (как я и хочу). Допустим, вы нажимаете на ссылку «о нас». Внезапно раздел о нас становится видимым (так, как я хочу). Теперь проблема, с которой я столкнулся, заключается в том, что когда я знаю, скажем, нажмите на ссылку «продукты», я хочу, чтобы контент «продукты» стал видимым, а контент «о нас» снова стал невидимым. (По сути, создавая иллюзию открытия новой страницы на той же странице)

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

<script type="text/javascript">
function toggleVisibility() {
document.getElementById("about").style.display = "";
if(document.getElementById("about").style.visibility == "hidden" ) {
    document.getElementById("about").style.visibility = "visible";
}
else {
document.getElementById("about").style.visibility = "hidden";
}
}
</script>

<script type="text/javascript">
function toggleVisibility1() {
document.getElementById("products").style.display = "";
if(document.getElementById("products").style.visibility == "hidden" ) {
    document.getElementById("products").style.visibility = "visible";
}
else {
document.getElementById("products").style.visibility = "hidden";
}
}
</script>

Ссылки для работы javascript выглядят так:

‹ href="#" onclick="toggleVisibility();">О программе

‹ href="##" onclick="toggleVisibility1();"> Продукты


javascript html javascript-events toggleclass
person Corey K    schedule 23.11.2010    source источник

Ответы (5)


arrow_upward
4
arrow_downward

вот еще одна простая функция

<script type="text/javascript">
function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}
</script>
<a href="#" onclick="toggle_visibility('foo');">if you click here, #foo will change visibility</a>
<div id="foo">blablabla</div>
person T.Todua    schedule 26.03.2013

arrow_upward
2
arrow_downward

Без jQuery вы бы хотели сделать что-то вроде этого:

<style type="text/css">
    .content {
        display: none;
    }
    #about {
        display: block;
    }
</style>

<script type="text/javascript">

    function toggleVisibility(selectedTab) {

         // Get a list of your content divs
         var content = document.getElementsByClassName('content');

         // Loop through, hiding non-selected divs, and showing selected div
         for(var i=0; i<content.length; i++) {
              if(content[i].id == selectedTab) {
                    content[i].style.display = 'block';
              } else {
                    content[i].style.display = 'none';
              }
         }

    }
</script>

<a href="#" onclick="toggleVisibility('about');">About</a>
<a href="#" onclick="toggleVisibility('products');"> Products</a>

<div id="about" class="content">About stuff here</div>
<div id="products" class="content">Product stuff here</div>

Пример здесь: http://jsfiddle.net/frDLX/

jQuery делает это намного проще, но если вы начинаете с JavaScript, иногда вам нужно увидеть программный код, чтобы вы могли понять, что происходит.

person Jeff B    schedule 23.11.2010
comment
Спасибо, это немного помогло, но на самом деле я пытаюсь добиться большей или меньшей функциональности, которую имеет www.fuelbrandinc.com. Я должен был сначала сделать все невидимым, а затем открывать один раздел за раз в зависимости от того, по какой ссылке вы нажимаете. - person Corey K; 24.11.2010
comment
Просто удалите #about { display: block; } из определения стиля. - person Jeff B; 24.11.2010

arrow_upward
1
arrow_downward

Это именно то, что упрощает jquery. Возьмите этот очень простой пример того, чего вы пытаетесь достичь:

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

    function toggleVisibility(newSection) {
        $(".section").not("#" + newSection).hide();
        $("#" + newSection).show();
    }
</script>

<a href="#" onclick="toggleVisibility('about');">About</a>

<a href="#" onclick="toggleVisibility('products');"> Products</a>

<div id="about" class="section">about section</div>
<div id="products" class="section">products section</div>
person mmurch    schedule 23.11.2010

arrow_upward
1
arrow_downward

Простое решение такое:

    <script type="text/javascript">
    function toggleVisibility(divid) {
    if (divid="about"){
        document.getElementById("about").style.visibility = "visible";
        document.getElementById("products").style.visibility = "hidden";
    }
    else if (divid="products")
    {
        document.getElementById("products").style.visibility = "visible";
        document.getElementById("about").style.visibility = "hidden";
    }
    }
    </script>


< href="#" onclick="toggleVisibility('about');">About

< href="##" onclick="toggleVisibility1('products');"> Products
person Websirnik    schedule 23.11.2010
comment
Это хорошая версия ответа, который я дал без jquery. За исключением того, что вы проверяете равенство строк, используя = вместо == - person mmurch; 24.11.2010
comment
будет ли это работать, если я захочу использовать 5 разных разделов вместо 2? - person Corey K; 24.11.2010
comment
это будет работать с большим количеством разделов, но для каждого нового раздела вам придется добавить строку кода в каждый из else/if, чтобы поддерживать его. Если вы используете мой ответ jquery, вам не нужно будет делать ничего лишнего, чтобы добавлять/удалять разделы. - person mmurch; 24.11.2010

arrow_upward
0
arrow_downward

использовать свойство CSS display:

элемент исчезает

document.getElementById("products").style.display = "none";

элемент появляется и отображается как блок (по умолчанию для div)

document.getElementById("products").style.display = "block";

Я разместил пример кода здесь: jQuery: меню появляются/исчезают при нажатии - V2

PS

Здесь вы можете найти хорошие примеры различий между отображением и видимостью: http://wiw.org/~frb/css-docs/display/display.html

person atlavis    schedule 23.11.2010
comment
если вы используете jQuery, вы можете использовать $('#products').css('display', 'none'); - person Chris; 24.11.2010