Скрыть / показать div по нажатию

      Комментарии к записи Скрыть / показать div по нажатию отключены

Главная Форумы Программирование Веб программирование Скрыть / показать div по нажатию

Помечено: , ,

В этой теме 0 ответов, 1 участник, последнее обновление  Васильев Владимир Сергеевич 2 мес., 1 неделя назад.

  • Автор
    Сообщения
  • #3647

    Речь пойдет о скрытии и открывании блока div при нажатии на какой либо элемент. Если вы знаете, что при помощи javascript мы можем изменять CSS свойства объекта на странице, то это совсем не составит труда написать такой код.

    Для начала выложу сам код (чтобы было меньше воды):

    <html>
    <title>Скрывание блока по нажатию</title>
    <head>
    <style>
    #div
    {
    	width:100px;
    	height:100px;
    	background-color:orange;
    }
    #link
    {
    	cursor:pointer;
    }
    #link:hover
    {
    	color:red;
    	font-weight:bold;
    }
    </style>
    
    <script>

    function hide_show()
    {
    	//Получаем стиль блока с айди div (для изменения)
    	var div=document.getElementById("div").style.display;
    	//Получаем стиль ссылки (для изменения)
    	var link=document.getElementById("link").innerHTML;
    
    	//Изначально стиль display у блока равен ""
    	//так как он изначально отображается
    	//задаем ему стиль block
    	if(div=="")div="block";
    
    	//Если блок не отображается
    	if(div=="none")
    	{
    		div="block";
    		link="Скрыть";
    	}
    	//или наоборот
    	else
    	{
    		div="none";
    		link="Показать";
    	}
    	//Теперь меняем стили у ссылки
    	//и блока который хотим скрыть или показать
    	document.getElementById("div").style.display=div;
    	document.getElementById("link").innerHTML=link;
    }

    </script>
    
    </head>
    
    <body>
    
    	<a onClick="hide_show();return false;" id="link">Скрыть</a>
    
    	<div id="div">
    	</div>
    
    </body>
    
    </html>

    Сначала придаем блоку div стили, а именно ширину 100 пикселей, высоту 100 пикселей, фоновый цвет — оранжевый.

    Дальше придаем стиль для ссылки: курсор по умолчанию «pointer» (пальчик), при наведении сделать ссылку жирной и красной.

    После CSS стилей вы найдете хорошо закомментированный код на javascript (это и есть функция скрытия/показа блока).

    Ну и в самом конце html каркас всего написанного. Делаем ссылку с id равным link и блок с id равным div.

    Дополнение: хотелось бы чтобы изначально положение div`a было скрытым, а после чего по нажатию кнопки открыть, он отображался на странице. Решение:

    <html>
     
    <head>
     
    <script>
    function hide_show()
    {
        //Получаем стиль блока с айди div (для изменения)
        var div=document.getElementById("div").style.display;
        //Получаем стиль ссылки (для изменения)
        var link=document.getElementById("link").innerHTML;
     
        //Изначально стиль display у блока равен ""
        //так как он изначально отображается
        //задаем ему стиль block
        if(div=="")div="none";
     
        //Если блок не отображается
        if(div=="none")
        {
            div="block";
            link="Скрыть";
        }
        else
        {
            div="none";
            link="Показать";
        }
        //Теперь меняем стили у ссылки
        //и блока который хотим скрыть или показать
        document.getElementById("div").style.display=div;
        document.getElementById("link").innerHTML=link;
    }
    </script>
     
    <style>
    #div{
        width:200px;
        height:200px;
        background:orange;
        display:none;
    }
    #link{
        cursor:pointer;
        background:silver;
        padding:5px;
        float:left;
    }
    #link:hover
    {
        background:yellow;
    }
    </style>
     
    </head>
     
    <div id="link" onClick="hide_show();">
    Показать
    </div>
     
    <div id="div">
    </div>
     
    </html>

    Код такой же, просто немного изменились события. Теперь изначально переменная div стоит со значением «none». И после этого, конечно же мы меняем надписи местами.

Для ответа в этой теме необходимо авторизоваться.