Javascript / HTML - Переключение видимости (автоматически заставляет один элемент div скрываться, когда другой визуализируется) - PullRequest
Новая
       4

Javascript / HTML - Переключение видимости (автоматически заставляет один элемент div скрываться, когда другой визуализируется)

8 голосов
/ 24 ноября 2010

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

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

Вот код, который я придумал до сих пор.Я могу сделать некоторые элементы div видимыми и невидимыми (onclick), но не могу понять, как сделать так, чтобы в каждый момент времени был виден только один элемент 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 выглядят так:this:

О

Продукты

Ответы [ 5 ]

4 голосов
/ 26 марта 2013

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

<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>
2 голосов
/ 24 ноября 2010

Без 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,иногда вы хотите увидеть программный код, чтобы вы могли сказать, что происходит.

1 голос
/ 24 ноября 2010

Это именно то, что делает 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>
1 голос
/ 24 ноября 2010

Простое решение выглядит так: 

    <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
0 голосов
/ 24 ноября 2010

использовать 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

...