Jump to content

Link Care Sa Schimbe Doar Div-Ul

alex008

By +alex008,
in HTML

 Share

Recommended Posts

alex008 Grand Master

+alex008

Posted
Posted

Vreau sa fac o pagina html normala si in partea stanga sa pun mai multe linkuri care sa imi schimbe video-ul din divul cu video de pe site, fara sa fac mai multe pagini html pentru fiecare video.

Cum pot sa fac asta? Ce script ar trebui sa pun in site? Vreau sa pun videouri hostate pe site-uri gen megavideo, youtube etc (daca conteaza cumva)

Link to comment
Share on other sites

gaby Grand Master

gaby

Posted
Posted

Asa ceva te-ar ajuta ? (folosirea atributului <a> name)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Exemplu a name</title>

<style type="text/css"> 


#meniu {

background: #999999;

position: absolute;

top: 10px;

left: 0px;

width: 150px;

height: auto;

}

#continut {

background: #fff;

position: absolute;

top: 10px;

left: 170px;

width: 650px;

height: auto;

}

</style>


</head>

<body>


<div id="meniu"><font color="#FFFFFF"><b>Meniul Magic</b></font><br /><br /><a href="#Filmulet_1">Filmulet 1</a><br /><a href="#Filmulet_2">Filmulet 2</a><br /><a href="#Filmulet_3">Filmulet 3</a><br /></div>

<div id="continut">Continut:<br /><br /><br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

<a name="Filmulet_1"><b>Filmuletul cu numarul 1</b></a><br /><br /><br />

<iframe width="600" height="300" src="http://www.youtube.com/embed/qHxlzcAPbBE" frameborder="0" allowfullscreen></iframe><br /><br /><br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

<a name="Filmulet_2"><b>Filmuletul cu numarul 2</b></a><br /><br /><br />

<iframe width="600" height="300" src="http://www.youtube.com/embed/qHxlzcAPbBE" frameborder="0" allowfullscreen></iframe><br /><br /><br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<br />

<a name="Filmulet_3"><b>Filmuletul cu numarul 3</b></a><br /><br /><br />

<iframe width="600" height="300" src="http://www.youtube.com/embed/qHxlzcAPbBE" frameborder="0" allowfullscreen></iframe><br /><br /><br />

</div>

</body>

</html>

[/code]
  • Upvote 1

Te-ai inregistrat? Ne-ar placea sa te prezinti.

Cum pot sustine forumul?
Cumpara de la eMag folosind acest link.
--------------------
oG2BN9d.gifse1WdXd.gifQG6MtmI.gifRHYjDzD.gifG5p1wui.gif

Link to comment
Share on other sites
alex008 Grand Master

+alex008

Posted
  • Author
Posted

Interesanta chestia, dar ma gandeam ca sa nu se vada pe aceeiasi pagina clipurile decat daca dai click pe ele, sa nu fie vizibile decat. Adica ai pagina ceva de genu:

div all

div banner

div meniu

div continut (descrieri)

div video (trailer)

div footer

si cand dai click pe linkul de pe margine sa schimbe continutul divului video, dar toate susrsele de video sa fie puse in aceeiasi pagina, dar sa nu se vada pe aceeiasi pagina (cand dai scrool). Am vazut asa ceva in php (parca) dar ,a gandeam ca poate e ceva script sa il introduc in html, ca php nu stiu decat niste html si css (momentan).

Vreau sa fac un site ceva gen seriale sau asa ceva cateva categorii, si o lista cu episoade si cand dai click pe episodul 1 (spre exemplu) sa-ti apara pe pagina care sa arate la fel numai clipul sa se schimbe. Ceva de genu as vrea daca se poate, si daca nu se poate scrict cu html, cum pot sa il fac cu alt cod care sa il introduc intr-un cod html?

Link to comment
Share on other sites
gaby Grand Master

gaby

Posted
Posted

Uite, o alta idee:

demohu.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

</head>


<body>

<div style="padding: 3px; background-color: #FFFFFF; border: 1px solid #d8d8d8; font-size: 1em;"><div style="text-transform: uppercase; border-bottom: 1px solid #CCCCCC; margin-bottom: 3px; font-size: 0.8em; font-weight: bold; display: block;"><span onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerHTML = '<b>Fragment: </b><a href=\'#\' onClick=\'return false;\'>ascunde</a>'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '<b>Fragment: </b><a href=\'#\' onClick=\'return false;\'>afiseaza</a>'; }" /><b>Fragment: </b><a href="#" onClick="return false;">afiseaza</a></span></div><div class="quotecontent"><div style="display: none;">{TEXT}</div></div></div>

<br />


<div style="padding: 3px; background-color: #FFFFFF; border: 1px solid #d8d8d8; font-size: 1em;"><div style="text-transform: uppercase; border-bottom: 1px solid #CCCCCC; margin-bottom: 3px; font-size: 0.8em; font-weight: bold; display: block;"><span onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerHTML = '<b>Fragment: </b><a href=\'#\' onClick=\'return false;\'>ascunde</a>'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '<b>Fragment: </b><a href=\'#\' onClick=\'return false;\'>afiseaza</a>'; }" /><b>Fragment: </b><a href="#" onClick="return false;">afiseaza</a></span></div><div class="quotecontent"><div style="display: none;">{TEXT}</div></div></div>


<br />

<div style="padding: 3px; background-color: #FFFFFF; border: 1px solid #d8d8d8; font-size: 1em;"><div style="text-transform: uppercase; border-bottom: 1px solid #CCCCCC; margin-bottom: 3px; font-size: 0.8em; font-weight: bold; display: block;"><span onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerHTML = '<b>Fragment: </b><a href=\'#\' onClick=\'return false;\'>ascunde</a>'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '<b>Fragment: </b><a href=\'#\' onClick=\'return false;\'>afiseaza</a>'; }" /><b>Fragment: </b><a href="#" onClick="return false;">afiseaza</a></span></div><div class="quotecontent"><div style="display: none;">{TEXT}</div></div></div>

</body>

</html>

[/code]

Sau, un meniu interesant: :link:



demo2k.png



Daca nici aceste metode nu te multumesc, arunca un ochi si pe aici: http://www.willmaster.com/blog/css/show-hide-floating-div.php si http://www.willmaster.com/library/web-development/replace-div-content.php
  • Upvote 1

Te-ai inregistrat? Ne-ar placea sa te prezinti.

Cum pot sustine forumul?
Cumpara de la eMag folosind acest link.
--------------------
oG2BN9d.gifse1WdXd.gifQG6MtmI.gifRHYjDzD.gifG5p1wui.gif

Link to comment
Share on other sites
alex008 Grand Master

+alex008

Posted
  • Author
Posted

la :link: la al doilea A Click To Replace The Div Content Example, cred ca asa ceva imi trebuie mie, dar daca inlocuiesc in cod cu ce-mi trebuie nu-mi merge. Adica vreau ca linku pe care dai click sa fie in divul 1 si videoul sa apara in divul 2, dar nu stiu de ce nu-mi merge :(( (is praf :( )

Link to comment
Share on other sites
gaby Grand Master

gaby

Posted
Posted

Try this one:

<html>

<head>

	<title>TEST</title>

	<style>

		div, a { padding:3px; margin:3px 3px 33px 3px; }

		#script1 { border:1px solid red; }

	</style>

	<script>

		function changeDivContent( nameOfDiv, newContent )

		{

			var div = document.getElementById( nameOfDiv );

			if( div )

			{

				div.innerHTML = newContent;

			}

		}

	</script>

</head>

<body>

	<a href="#" onclick="changeDivContent( 'script1', 'Ia uite ce-ti arat ^_^' )">Click aici mancati-as.</a>

	<div id="script1">

		UGA UGA UGA

	</div>


</body>

</html>[/code]
  • Upvote 1

Te-ai inregistrat? Ne-ar placea sa te prezinti.

Cum pot sustine forumul?
Cumpara de la eMag folosind acest link.
--------------------
oG2BN9d.gifse1WdXd.gifQG6MtmI.gifRHYjDzD.gifG5p1wui.gif

Link to comment
Share on other sites
alex008 Grand Master

+alex008

Posted
  • Author
Posted

Am gasit ceva care se potriveste. Bineinteles ca dupa ce am inceput sa editez mi s-a stricat si imi sare tot la prima pagina, dar sper sa il rezolv :))

<!-- sursa cod: http://www.htmlforums.com/client-side-scripting/t-change-div-content-from-link-73349.html -->


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<style type="text/css">


#tablist{

padding: 3px 0;

margin:0;

font: bold 12px Verdana;

}


#tablist li{

list-style: none;

margin: 0;

width:150px;

}


#tablist li a{

padding: 3px 0.5em;

margin-left: 3px;

border: 1px solid #778;

border-bottom: none;

display:block;

}


#tablist li a:link, #tablist li a:visited{

color: #FFF;

}


#tablist li a.current{

background: lightyellow;

}


#tabcontentcontainer{

width: 400px;

/* Insert Optional Height definition here to give all the content a unified height */

padding: 5px;

border: 1px solid black;

}


.tabcontent{

display:none;

}


a.tab {

background:black;

}


a.tab:active{

background:red;

}

</style>


<script type="text/javascript">


/***********************************************

* Tab Content script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

***********************************************/


//Set tab to intially be selected when page loads:

//[which tab (1=first tab), ID of tab content to display]:

var initialtab=[1, "sc1"]


////////Stop editting////////////////


function cascadedstyle(el, cssproperty, csspropertyNS){

if (el.currentStyle)

return el.currentStyle[cssproperty]

else if (window.getComputedStyle){

var elstyle=window.getComputedStyle(el, "")

return elstyle.getPropertyValue(csspropertyNS)

}

}


var previoustab=""


function expandcontent(cid, aobject){

var links=document.getElementsByTagName("a");

for(i=0;i<links.length;i++) {

if(links[i].className=="tab") {

   links[i].style.backgroundColor="#000";

 }

}

     aobject.style.backgroundColor="#F00";

if (document.getElementById){

highlighttab(aobject)

detectSourceindex(aobject)

if (previoustab!="")

document.getElementById(previoustab).style.display="none"

document.getElementById(cid).style.display="block"

previoustab=cid

if (aobject.blur)

aobject.blur()

return false

}

else

return true

}


function highlighttab(aobject){

if (typeof tabobjlinks=="undefined")

collecttablinks()

//for (i=0; i<tabobjlinks.length; i++)

//tabobjlinks[i].style.backgroundColor=initTabcolor

//var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor

//aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor

}


function collecttablinks(){

var tabobj=document.getElementById("tablist")

tabobjlinks=tabobj.getElementsByTagName("A")

}


function detectSourceindex(aobject){

for (i=0; i<tabobjlinks.length; i++){

if (aobject==tabobjlinks[i]){

tabsourceindex=i //source index of tab bar relative to other tabs

break

}

}

}


function do_onload(){

var cookiename=(typeof persisttype!="undefined" && persisttype=="sitewide")? "tabcontent" : window.location.pathname

var cookiecheck=window.get_cookie && get_cookie(cookiename).indexOf("|")!=-1

collecttablinks()

initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color")

initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color")

if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){

var cookieparse=get_cookie(cookiename).split("|")

var whichtab=cookieparse[0]

var tabcontentid=cookieparse[1]

expandcontent(tabcontentid, tabobjlinks[whichtab])

}

else

expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])

}


if (window.addEventListener)

window.addEventListener("load", do_onload, false)

else if (window.attachEvent)

window.attachEvent("onload", do_onload)

else if (document.getElementById)

window.onload=do_onload



</script>

</head>


<body>

<ul id="tablist">

<li><a class="tab" href="http://www.dynamicdrive.com" onclick="return expandcontent('sc1', this)">Dynamic Drive</a></li>

<li><a class="tab" href="new.htm" onclick="return expandcontent('sc2', this)">What's New</a></li>

<li><a class="tab" href="hot.htm" onclick="return expandcontent('sc3', this)">What's Hot</a></li>

<li><a class="tab" href="search.htm" onclick="return expandcontent('sc4', this)">Search</a></li>

</ul>


<div id="tabcontentcontainer">


<div id="sc1" class="tabcontent">

Visit Dynamic Drive for free, award winning DHTML scripts for your site:<br />

</div>


<div id="sc2" class="tabcontent">

Visit our <a href="http://www.dynamicdrive.com/new.htm">What's New</a> section to see recently added scripts to our archive.</div>


<div id="sc3" class="tabcontent">

Visit our <a href="http://www.dynamicdrive.com/hot.htm">Hot</a> section for a list of DD scripts that are popular to the visitors.</div>


<div id="sc4" class="tabcontent">

<form action="http://www.google.com/search" method="get" onsubmit="this.q.value='site:www.dynamicdrive.com '+this.qfront.value">

<p>Search Dynamic Drive:<br />

<input name="q" type="hidden" />

<input name="qfront" type="text" style="width: 180px" /> <input type="submit" value="Search" /></p>

</form>

</div>

</div>

</body>

</html>

Link to comment
Share on other sites
gaby Grand Master

gaby

Posted
Posted

Hmm, uite, am modificat cate putin si mie imi functioneaza perfect:

<!-- sursa cod: http://www.htmlforums.com/client-side-scripting/t-change-div-content-from-link-73349.html --> 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 

<title>Untitled Document</title> 

<style type="text/css"> 


#tablist{ 

padding: 3px 0; 

margin:0; 

font: bold 12px Verdana; 

} 


#tablist li{ 

list-style: none; 

margin: 0; 

width:150px; 

} 


#tablist li a{ 

padding: 3px 0.5em; 

margin-left: 3px; 

border: 1px solid #778; 

border-bottom: none; 

display:block; 

} 


#tablist li a:link, #tablist li a:visited{ 

color: #FFF; 

} 


#tablist li a.current{ 

background: lightyellow; 

} 


#tabcontentcontainer{ 

width: 400px; 

/* Insert Optional Height definition here to give all the content a unified height */ 

padding: 5px; 

border: 1px solid black; 

} 


.tabcontent{ 

display:none; 

} 


a.tab { 

background:black; 

} 


a.tab:active{ 

background:red; 

} 

</style> 


<script type="text/javascript"> 


/*********************************************** 

* Tab Content script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) 

* This notice MUST stay intact for legal use 

* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code 

***********************************************/ 


//Set tab to intially be selected when page loads: 

//[which tab (1=first tab), ID of tab content to display]: 

var initialtab=[1, "sc1"] 


////////Stop editting//////////////// 


function cascadedstyle(el, cssproperty, csspropertyNS){ 

if (el.currentStyle) 

return el.currentStyle[cssproperty] 

else if (window.getComputedStyle){ 

var elstyle=window.getComputedStyle(el, "") 

return elstyle.getPropertyValue(csspropertyNS) 

} 

} 


var previoustab="" 


function expandcontent(cid, aobject){ 

var links=document.getElementsByTagName("a"); 

for(i=0;i<links.length;i++) { 

if(links[i].className=="tab") { 

   links[i].style.backgroundColor="#000"; 

 } 

} 

     aobject.style.backgroundColor="#F00"; 

if (document.getElementById){ 

highlighttab(aobject) 

detectSourceindex(aobject) 

if (previoustab!="") 

document.getElementById(previoustab).style.display="none" 

document.getElementById(cid).style.display="block" 

previoustab=cid 

if (aobject.blur) 

aobject.blur() 

return false 

} 

else 

return true 

} 


function highlighttab(aobject){ 

if (typeof tabobjlinks=="undefined") 

collecttablinks() 

//for (i=0; i<tabobjlinks.length; i++) 

//tabobjlinks[i].style.backgroundColor=initTabcolor 

//var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor 

//aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor 

} 


function collecttablinks(){ 

var tabobj=document.getElementById("tablist") 

tabobjlinks=tabobj.getElementsByTagName("A") 

} 


function detectSourceindex(aobject){ 

for (i=0; i<tabobjlinks.length; i++){ 

if (aobject==tabobjlinks[i]){ 

tabsourceindex=i //source index of tab bar relative to other tabs 

break 

} 

} 

} 


function do_onload(){ 

var cookiename=(typeof persisttype!="undefined" && persisttype=="sitewide")? "tabcontent" : window.location.pathname 

var cookiecheck=window.get_cookie && get_cookie(cookiename).indexOf("|")!=-1 

collecttablinks() 

initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color") 

initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color") 

if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){ 

var cookieparse=get_cookie(cookiename).split("|") 

var whichtab=cookieparse[0] 

var tabcontentid=cookieparse[1] 

expandcontent(tabcontentid, tabobjlinks[whichtab]) 

} 

else 

expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1]) 

} 


if (window.addEventListener) 

window.addEventListener("load", do_onload, false) 

else if (window.attachEvent) 

window.attachEvent("onload", do_onload) 

else if (document.getElementById) 

window.onload=do_onload 



</script> 

</head> 


<body> 

<ul id="tablist"> 

<li><a class="tab" href="http://www.dynamicdrive.com" onclick="return expandcontent('sc1', this)">Film 1</a></li> 

<li><a class="tab" href="new.htm" onclick="return expandcontent('sc2', this)">Film 2</a></li> 

<li><a class="tab" href="hot.htm" onclick="return expandcontent('sc3', this)">Film 3</a></li> 

<li><a class="tab" href="search.htm" onclick="return expandcontent('sc4', this)">Search</a></li> 

</ul> 


<div id="tabcontentcontainer"> 


<div id="sc1" class="tabcontent"> 

<iframe width="640" height="360" src="http://www.youtube.com/embed/C0U4aDOjr_M" frameborder="0" allowfullscreen></iframe><br /> 

</div> 


<div id="sc2" class="tabcontent"> 

<iframe width="480" height="360" src="http://www.youtube.com/embed/iBmvz3vzRT8" frameborder="0" allowfullscreen></iframe></div> 


<div id="sc3" class="tabcontent"> 

<iframe width="640" height="360" src="http://www.youtube.com/embed/2-Fj33r2qdc" frameborder="0" allowfullscreen></iframe></div> 


<div id="sc4" class="tabcontent"> 

<form action="http://www.google.com/search" method="get" onsubmit="this.q.value='site:www.dynamicdrive.com '+this.qfront.value"> 

<p>Search Dynamic Drive:<br /> 

<input name="q" type="hidden" /> 

<input name="qfront" type="text" style="width: 180px" /> <input type="submit" value="Search" /></p> 

</form> 

</div> 

</div> 

</body> 

</html>


[/code]

Te-ai inregistrat? Ne-ar placea sa te prezinti.

Cum pot sustine forumul?
Cumpara de la eMag folosind acest link.
--------------------
oG2BN9d.gifse1WdXd.gifQG6MtmI.gifRHYjDzD.gifG5p1wui.gif

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.

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
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • 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.

  I accept