Появяващ се див

[miro91]

Примерно имам един текст и имам линкове в този текст искам когато се цъкне на линка най отдолу под текста да изскача един див и там да има информация някакъв текст и като натисна на друг линк да се отваря друга информация а като натисна на същия линк да се скрива дива

 

[svilkaa]

<script type="text/javascript">
	function showStuff(id) {
		document.getElementById(id).style.display = 'block';
	}
	function hideStuff(id) {
		document.getElementById(id).style.display = 'none';
	}
</script>

<div><a href="#" onclick="showStuff('opa'); return false;">Нещо</a><br>
<div id="opa" style="display: none;">Текст нещо<br>
<a href="#" onclick="hideStuff('opa'); return false;">скрий</a>
</div>
</div>

само си нагалсяш id="opa"

Демо: http://web-tourist.net/project/svilkaa/hide.html

:?:

 

[DJCharge]

Ето го и малко променено :roll:

<script type="text/javascript"> 
   function showStuff(id) { 
	if(document.getElementById(id).style.display == 'block') {
	       document.getElementById(id).style.display = 'none';
	}
	else { document.getElementById(id).style.display = 'block'; }
   } 
</script> 

<div><a href="#" onclick="showStuff('edno'); return false;">покажи/скрий 1</a><br> 
<div id="edno" style="display: none;">bla bla bla<br>bla bla<br>bla </div> 
</div>

<div><a href="#" onclick="showStuff('dve'); return false;">покажи/скрий 2</a><br> 
<div id="dve" style="display: none;">bla bla bla<br>bla bla<br>bla </div> 
</div>

Давам го и с 2 примера .. сега някой ако знае как може да се сложи бисквитка, която да помни как е оставено .. грешка няма да има

Друг пример

<script type="text/javascript"> 
   function showStuff(id) { 
	if(document.getElementById(id).style.display == 'block') {
	       document.getElementById(id).style.display = 'none';
	}
	else { document.getElementById(id).style.display = 'block'; }
   } 
</script> 

<div><a href="#" onclick="showStuff('edno'); return false;">покажи/скрий 1</a><br> 
<div id="edno" style="display: none;">bla bla bla<br>bla bla<br>bla
<div><a href="#" onclick="showStuff('dve'); return false;">прочети още ...</a><br> 
<div id="dve" style="display: none;">blaaaa xaxa :D </div> 
</div></div> 
</div>

П.С. ако ще даваш точка, дай я на @svilkaa :lol:

 

[Lam40]

http://web-tourist.net/forum/viewtopic.php?t=25506

И на мен ми трябваше същото на скоро.

 

[miro91]

<script type="text/javascript">
	function showStuff(id) {
		document.getElementById(id).style.display = 'block';
	}
	function hideStuff(id) {
		document.getElementById(id).style.display = 'none';
	}
</script>

<div><a href="#" onclick="showStuff('opa'); return false;">Нещо</a><br>
<div id="opa" style="display: none;">Текст нещо<br>
<a href="#" onclick="hideStuff('opa'); return false;">скрий</a>
</div>
</div>

само си нагалсяш id="opa"

Демо: http://web-tourist.net/project/svilkaa/hide.html

:?:

Добре а ако направя така няколко линка със различни текстове да са показват и ако натисна на един и после на друг линк единия текст ще се скрива и ще се показва другия нали? Ако е така получаваш точката.

 

[svilkaa]

Еми натискаш скрий на текста и той се скрива и си отваряш друг div

 

[miro91]

Виж в този сайт как е искам нещо подобно.
http://css-bg.net/faq.php Само че аз искам много текст да имам и в текста два три линка и като цакна на един линк да се показва дива най отдолу и като дам на другия линк дива да стои и да са сменя текста.

 

[svilkaa]

Еми виж на пичовете сорса

<script>
if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj){
	if(document.getElementById){
	var el = document.getElementById(obj);
	var ar = document.getElementById("masterdiv").getElementsByTagName("div"); //DynamicDrive.com change
		if(el.style.display != "block"){ //DynamicDrive.com change
			for (var i=0; i<ar.length; i++){
				if (ar[i].className=="submenu") //DynamicDrive.com change
				ar[i].style.display = "none";
			}
			el.style.display = "block";
		}else{
			el.style.display = "none";
		}
	}
}
</script>
<div id="masterdiv">
	<div class="menutitle" onclick="SwitchMenu('sub1')" ><strong><img src="img/detail.gif" height="11" width="11" alt="" /> За кого е предназначен "CSS-самоучител" ?</strong></div>

	<div class="submenu" id="sub1">
	<p>"CSS-самоучител" е предназначен предимно за самостоятелна работа с цел усвояване и усъвършенстване технологията и принципите на използването на CSS при изграждането на WEB-страница. Ориентиран е главно към начинаещия потребител, но с успех може да се използва и от по-напреднали, най-вече заради многобройните примери, изчерпателния справочник и речника. </p>
	<p>Проектът ни ще бъде от полза и за всички онези, които просто искат да разширят своите познания, да обогатят своя технически речник или просто да научат нещо ново.</p>
	</div>
	<div class="menutitle" onclick="SwitchMenu('sub2')" ><strong><img src="img/detail.gif" height="11" width="11" alt="" /> Кои са основните цели на "CSS-самоучител"?</strong></div>
	<div class="submenu" id="sub2">
		<p>Запознаване с една съвременна технология, разделяйки съдържанието от презентацията;</p>

		<p>Систематизиране и описание на основните CSS правила, както и примери за тяхното приложение;</p>
		<p>Предоставяне на справочна информация, необходима в процеса на разработка на WEB-сайта;</p>
		<p>Практическо упражняване и проверка на придобитите знания</p>
		<p>Провокиране на интереса у учениците за търсене на допълнителни източници на информация;</p>
		<p>Формиране на траен интерес към науката информатика и информационните технологии;</p>
	</div>

		<div class="menutitle" onclick="SwitchMenu('sub3')" ><strong><img src="img/detail.gif" height="11" width="11" alt="" /> Кои са предимствата на "CSS-самоучител"?</strong></div>
	<div class="submenu" id="sub3">
		<p>Събрана и систематизирана на едно място голямо количество специализирана информация;</p>
		<p>Достъпен и разбираем език;</p>
		<p>Изобилие от примери за практическо приложение на застъпения материал;</p>
		<p>Богат терминологичен речник на най-често срещаните съкращения термини и понятия;</p>

		<p>Специално подбрани, подредени по трудност упражнения, заедно с техните решения</p>
		<p>Възможност всеки да тества придобитите си знания</p>
		<p>сайтът разполага със собствен хост и е лесно достъпен за широк кръг потенциални потребители;</p>
		<p>Наличието на справочник на български език е ценна придобивка за всеки начинаещ ентусиаст;</p>
		</div>

http://web-tourist.net/project/svilkaa/hide2.html
или в оня сайт дето даде

 

[miro91]

Еми виж на пичовете сорса

<script>
if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj){
	if(document.getElementById){
	var el = document.getElementById(obj);
	var ar = document.getElementById("masterdiv").getElementsByTagName("div"); //DynamicDrive.com change
		if(el.style.display != "block"){ //DynamicDrive.com change
			for (var i=0; i<ar.length; i++){
				if (ar[i].className=="submenu") //DynamicDrive.com change
				ar[i].style.display = "none";
			}
			el.style.display = "block";
		}else{
			el.style.display = "none";
		}
	}
}
</script>
<div id="masterdiv">
	<div class="menutitle" onclick="SwitchMenu('sub1')" ><strong><img src="img/detail.gif" height="11" width="11" alt="" /> За кого е предназначен "CSS-самоучител" ?</strong></div>

	<div class="submenu" id="sub1">
	<p>"CSS-самоучител" е предназначен предимно за самостоятелна работа с цел усвояване и усъвършенстване технологията и принципите на използването на CSS при изграждането на WEB-страница. Ориентиран е главно към начинаещия потребител, но с успех може да се използва и от по-напреднали, най-вече заради многобройните примери, изчерпателния справочник и речника. </p>
	<p>Проектът ни ще бъде от полза и за всички онези, които просто искат да разширят своите познания, да обогатят своя технически речник или просто да научат нещо ново.</p>
	</div>
	<div class="menutitle" onclick="SwitchMenu('sub2')" ><strong><img src="img/detail.gif" height="11" width="11" alt="" /> Кои са основните цели на "CSS-самоучител"?</strong></div>
	<div class="submenu" id="sub2">
		<p>Запознаване с една съвременна технология, разделяйки съдържанието от презентацията;</p>

		<p>Систематизиране и описание на основните CSS правила, както и примери за тяхното приложение;</p>
		<p>Предоставяне на справочна информация, необходима в процеса на разработка на WEB-сайта;</p>
		<p>Практическо упражняване и проверка на придобитите знания</p>
		<p>Провокиране на интереса у учениците за търсене на допълнителни източници на информация;</p>
		<p>Формиране на траен интерес към науката информатика и информационните технологии;</p>
	</div>

		<div class="menutitle" onclick="SwitchMenu('sub3')" ><strong><img src="img/detail.gif" height="11" width="11" alt="" /> Кои са предимствата на "CSS-самоучител"?</strong></div>
	<div class="submenu" id="sub3">
		<p>Събрана и систематизирана на едно място голямо количество специализирана информация;</p>
		<p>Достъпен и разбираем език;</p>
		<p>Изобилие от примери за практическо приложение на застъпения материал;</p>
		<p>Богат терминологичен речник на най-често срещаните съкращения термини и понятия;</p>

		<p>Специално подбрани, подредени по трудност упражнения, заедно с техните решения</p>
		<p>Възможност всеки да тества придобитите си знания</p>
		<p>сайтът разполага със собствен хост и е лесно достъпен за широк кръг потенциални потребители;</p>
		<p>Наличието на справочник на български език е ценна придобивка за всеки начинаещ ентусиаст;</p>
		</div>

http://web-tourist.net/project/svilkaa/hide2.html
или в оня сайт дето даде

Ок ама защо на този текст не е като линк тай никой няма да разбере да цъкне на линковете наприви го така това ми трябва и може ли само на определена дума като са натисне.
И може ли дива който се появява да е най отдолу.

 

[svilkaa]

Еми вместо да е така
<div class="menutitle" onclick="SwitchMenu('sub3')" >
го направи
<div><a href="" onclick="SwitchMenu('sub3')">дума</a>

:?: