как менять <div>

d4a1 · December 9, 2011

Добрый день. Подскажите пожалуйста как сделать:

есть два блока

<div>1</div> // выводится

<div>2</div> // не выводится

Первый должен выводиться по умолчанию, и ссылка, при нажатии - выводится второй div, а первый не выводится, и обратно.

s0rr0w · December 9, 2011

Добрый день. Подскажите пожалуйста как сделать:
есть два блока
<div>1</div> // выводится
<div>2</div> // не выводится
Первый должен выводиться по умолчанию, и ссылка, при нажатии - выводится второй div, а первый не выводится, и обратно.

Что именно нужно подсказать? Что не понятно в решении данной задачи?

d4a1 · December 9, 2011

Как их менять по ссылке ?

Напишите пожалуйста код

workerbeeviii · December 9, 2011

jQuery пойдет?

d4a1 · December 9, 2011

Да конечно подойдёт

workerbeeviii · December 9, 2011

jQuery только-только изучаю, но получать доступ к элементу и изменять CSS вроде умею.

Сделал так: <a href="#" onclick='$("#block1").css("visibility", "hidden");'>Link</a>

Но не работает :angry: . Щас покопаюсь.

d4a1 · December 9, 2011

Буду благодарен. А то я даже не знаю как это реализовать.

Оффтопик : почему - то + не поставить [вы исчерпали лимит положительных ответов на сегодня] :blink:

workerbeeviii · December 9, 2011

Извините, но что-то не получается у меня, хотя вчера вечером похожий пример у меня работал. Знаний по JS и jQuery у меня маловато. :facepalmxd:

Задача ваша тривиальная, все делается обработчиком событий или можно даже функцию написать.

d4a1 · December 9, 2011

Я JS совсем не знаю.

workerbeeviii · December 9, 2011

С JS сработало. Вот пример:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test</title>
		<style>
			#block2 {
				visibility: hidden;
			}
		</style>
	</head>
	<body>
		<div id="block1">test</div>
		<div id="block2">text</div>
		<a href="#" onclick="document.getElementById('block2').style.visibility = 'visible'">Click</a>
	</body>
</html>

d4a1 · December 9, 2011

Не заменяет block1 .

Надо чтоб заменяло на block2 и обратно, ( лучше бы конечно click заменялся на click2 - > обратно на block1

workerbeeviii · December 9, 2011

Вот так имели в виду?

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test</title>
		<style>
			#block2 {
				/* visibility: hidden; */
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="block1">test</div>
		<div id="block2">text</div>
		<a href="#" onclick="document.getElementById('block2').style.display = 'block', document.getElementById('block1').style.display = 'none'">Click</a>
	</body>
</html>

d4a1 · December 9, 2011

Сейчас заменяет. :rolleyes:

А обратно можно сделать Click на Click2 -> на block1

workerbeeviii · December 9, 2011

Щас сделаю. Минуточку.

Вот! То, что вы хотели. Но код просто ужасный получился, для коммерческих проектов не подойдет, будут смеяться.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test</title>
		<style>
			#block2 {
				display: none;
			}
			#link2 {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="block1">Block 1</div>
		<div id="block2">Block 2</div>
		<a id="link1" href="#" onclick="document.getElementById('block2').style.display = 'block', document.getElementById('block1').style.display = 'none', document.getElementById('link2').style.display = 'block', this.style.display = 'none'">Click</a>
		<a id="link2" href="#" onclick="document.getElementById('block2').style.display = 'none', document.getElementById('block1').style.display = 'block', this.style.display = 'none', document.getElementById('link1').style.display = 'block'">Click</a>
	</body>
</html>

d4a1 · December 9, 2011

Спасибо workerbeeviii. А чего смеяться будут - вообще ужас что-ли ?

workerbeeviii · December 9, 2011

Спасибо workerbeeviii. А чего смеяться будут - вообще ужас что-ли ?

Думаю что, да. Быдлокод называется. Но если все это хозяйство вывести в отдельный js файл и написать маленькую функцию, то все будет тип-топ (ИМХО). А это для коммерческого проекта что ли?

d4a1 · December 9, 2011

Для коммерческого :facepalmxd:

workerbeeviii · December 9, 2011

Сейчас попробую через функцию.

d4a1 · December 9, 2011

Вот рабочий. Но мне бы Click на Click2 ещё бы менять

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>Test</title>
                <style>
                        #block2 {
                                /* visibility: hidden; */
                                display: none;
                        }
                </style>
        </head>
        <body>
                <div id="block1">test</div>
                <div id="block2">text</div>
                <a href="#" onclick="return switchBlock();">Click</a>
<script type="text/javascript">
    function switchBlock() {
        var el1 = document.getElementById('block2'),
             el2 = document.getElementById('block1'),
             st = el1.currentStyle ? el1.currentStyle.display : window.getComputedStyle( el1, null ).getPropertyValue('display');

        if ( st == 'none' ) {
            el1.style.display = 'block';
            el2.style.display = 'none';
        } else {
            el1.style.display = 'none';
            el2.style.display = 'block';
        }
        return false;
    }
</script>
        </body>
</html>

Или тоже быдлокод :facepalmxd:

Edited December 9, 2011 by d4a1

workerbeeviii · December 9, 2011

С функцией у меня не получается. Но если к вашему коду добавить еще один <a> и немножко модифицировать скрипт, может сработает как надо? Щас попытаюсь вникнуть.

workerbeeviii · December 9, 2011

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test</title>
		<style>
			#block2 {
				display: none;
			}
			#link2 {
				display: none;
			}
		</style>
		<script src="f.js">
		</script>
	</head>
	<body>
		<div id="block1">Block 1</div>
		<div id="block2">Block 2</div>
		<a id="link1" href="#" onclick="hiddenDiv()">Click1</a>
		<a id="link2" href="#" onclick="hiddenDiv()">Click2</a>
	</body>
</html>

function hiddenDiv() {
	var block1 = document.getElementById("block1");
	var block2 = document.getElementById("block2");
	var link1 = document.getElementById("link1");
	var link2 = document.getElementById("link2");
	function lnk1() {
		document.getElementById("block2").style.display = "block";
		document.getElementById("block1").style.display = "none";
		document.getElementById("link1").style.display = "none";
		document.getElementById("link2").style.display = "inline";
	}
	function lnk2() {
		document.getElementById("block2").style.display = "none";
		document.getElementById("block1").style.display = "block";
		document.getElementById("link1").style.display = "inline";
		document.getElementById("link2").style.display = "none";
	}
	link1.onclick = lnk1();
	// link2.onclick = lnk2();
}

d4a1 · December 9, 2011

Благодарю за помощь.

Sign In

как менять <div>

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information