Jump to content

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


d4a1
 Share

Recommended Posts

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

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

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

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

Link to comment
Share on other sites

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

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

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

  • Like 1
Link to comment
Share on other sites

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

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

  • Like 1
Link to comment
Share on other sites

С 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>

  • Like 1
Link to comment
Share on other sites

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

<!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>

  • Like 1
Link to comment
Share on other sites

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

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

<!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>

  • Like 1
Link to comment
Share on other sites

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

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

  • Like 1
Link to comment
Share on other sites

Вот рабочий. Но мне бы 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 by d4a1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

<!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();
}

  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy