javascript табове

aquafresh · 25 Август 2009

Здравейте, намерих един скрипт от human в друга тема ,но тъй като си нямам никаква представа от джава реших да ви питам.
Как мога да сложа на активното прозорче някакъв стил ?
Ето го кода

Код:

<script language="JavaScript">

function table(id) {
if(id==1){
 if(document.getElementById("table1").style.display != 'block') {
 document.getElementById("table1").style.display = 'block';
document.getElementById("table2").style.display = 'none';
   }
}
else
{

 if(document.getElementById("table2").style.display != 'block') {
 document.getElementById("table2").style.display = 'block';
document.getElementById("table1").style.display = 'none';
   }
}
}
</script>
<a href="javascript: table('1');">Таблица 1</a> | <a href="javascript: table('2');">Таблица 2</a>

<div id='table1' style="display: block">Таблица 1</div>
<div id='table2' style="display: none">Таблица 2</div>

ПС: и още един въпрос. Как мога да добавяш още линкове ?
ето до какво стигнах ,но не действа както трябва

Код:

<script language="JavaScript">

function table(id) {
if(id==1){
 if(document.getElementById("table1").style.display != 'block') {
 document.getElementById("table1").style.display = 'block';
document.getElementById("table2").style.display = 'none';
   }
}
if(id==2){
 if(document.getElementById("table2").style.display != 'block') {
 document.getElementById("table2").style.display = 'block';
document.getElementById("table3").style.display = 'none';
   }
}
if(id==3){
 if(document.getElementById("table3").style.display != 'block') {
 document.getElementById("table3").style.display = 'block';
document.getElementById("table1").style.display = 'none';
   }
}
}
</script>
<a href="javascript: table('1');">Таблица 1</a> | <a href="javascript: table('2');">Таблица 2</a> |  <a href="javascript: table('3');">Таблица 3</a>

<div id='table1' style="display: block">Таблица 1</div>
<div id='table2' style="display: none">Таблица 2</div> 
<div id='table3' style="display: none">Таблица 3</div>

gLaVoReZa · 25 Август 2009

Еми доколкото виждам просто :

Код:

#table1 {
/* стил */
}

#table2 {
/* стил */
}

Само малка забележка - Java и Javascript са съвсем различни неща, може и да знаеш, но да си кажа, понеже си написал Джава.

aquafresh · 25 Август 2009

Имам в предвид когато са кликнати и да сложа стил на линкчето

shterev · 25 Август 2009

този код ми е малко не 'елегантен'!
Намери нещо, което прави следното:
Взима ти всички елементи с даден клас, всичките ги прави да не се виждат, освен елемента , който си кликнал.И тогава вече можеш да му зададеш и друг клас.Мога да ти го напиша , но ползвам prototype библиотеката.

gLaVoReZa · 25 Август 2009

Код:

<script language="JavaScript">

function table(id) {
if(id==1){
 if(document.getElementById("table1").style.display != 'block') {
 document.getElementById("table1").style.display = 'block';
document.getElementById("table2").style.display = 'none';
document.getElementById("link1").style.background = 'Gainsboro';
document.getElementById("link2").style.background = 'white';
   }
}
else
{

 if(document.getElementById("table2").style.display != 'block') {
 document.getElementById("table2").style.display = 'block';
document.getElementById("table1").style.display = 'none';
document.getElementById("link2").style.background = 'Gainsboro';
document.getElementById("link1").style.background = 'white';
   }
}
}
</script>
<span id="link1" style="background:Gainsboro;"><a href="javascript: table('1');">Таблица 1</a></span> | <span id="link2" style="background:white;"><a href="javascript: table('2');">Таблица 2</a></span>

<div id='table1' style="display: block">Таблица 1</div>
<div id='table2' style="display: none">Таблица 2</div>

gLaVoReZa · 25 Август 2009

Това е кода ти за добавяне на линкове, поправен. Предния ми пост е за сменяне на стила на натиснатия линк.

Код:

<script language="JavaScript">

function table(id) {
if(id==1){
 if(document.getElementById("table1").style.display != 'block') {
 document.getElementById("table1").style.display = 'block';
document.getElementById("table2").style.display = 'none';
document.getElementById("table3").style.display = 'none';
   }
}
if(id==2){
 if(document.getElementById("table2").style.display != 'block') {
 document.getElementById("table1").style.display = 'none';
 document.getElementById("table2").style.display = 'block';
document.getElementById("table3").style.display = 'none';
   }
}
if(id==3){
 if(document.getElementById("table3").style.display != 'block') {
 document.getElementById("table2").style.display = 'none';
 document.getElementById("table3").style.display = 'block';
document.getElementById("table1").style.display = 'none';
   }
}
}
</script>
<a href="javascript: table('1');">Таблица 1</a> | <a href="javascript: table('2');">Таблица 2</a> |  <a href="javascript: table('3');">Таблица 3</a>

<div id='table1' style="display: block">Таблица 1</div>
<div id='table2' style="display: none">Таблица 2</div>
<div id='table3' style="display: none">Таблица 3</div>

aquafresh · 26 Август 2009

Да мерси ,но не мога да сложа стила :?
ПС: успях.. мерси :?:

aquafresh · 26 Август 2009

А как да ги направя с картинки ?
Пробвах с

Код:

document.getElementById("link1").style.background="background-image: url('l.gif') no-repeat";

Но не пали..

marian · 26 Август 2009

document.getElementById("link1").style.background="url('l.gif') no-repeat";

aquafresh · 26 Август 2009

Мерси ,но сега се сетих ,че ми трябва width и height.. |(
Как да им го задам ?

marian · 26 Август 2009

Еми по същия начин само, че на background пишеш width или height...

document.getElementById("link1").style.width="300px";

aquafresh · 26 Август 2009

Може ли по някакъв начин да се сменя класа на дива в това.
Тоест когато е цъкнато да е в клас last2 ,а когато не е - last
:roll:

Код:

	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
body {
	color: #ccc;
}
a {
	color: #ccc;
}
.last {
background-image:url(l.gif); 
width:105;
 height: 35px;
 background-repeat: no-repeat;
padding: 7 0 0 15px;
margin: 2 0 0 5px;
}

.last2 {
background-image:url(l2.gif); 
width:105;
 height: 33px;
 background-repeat: no-repeat;
padding: 7 0 0 15px;
margin: 3 0 0 5px;
}

.last_bg {
background-image:url(last_bg.gif); 
width:686;
 height: 170px;
 background-repeat: no-repeat;
}
</style>
<script language="JavaScript">
function table(id) {
if(id==1){
 if(document.getElementById("table1").style.display != 'block') {
 document.getElementById("table1").style.display = 'block';
document.getElementById("table2").style.display = 'none';
document.getElementById("table3").style.display = 'none';
document.getElementById("link1").style.background="url('l.gif') no-repeat";
document.getElementById("link2").style.background="url('l2.gif') no-repeat";
document.getElementById("link3").style.background="url('l2.gif') no-repeat";
   }
}
if(id==2){
 if(document.getElementById("table2").style.display != 'block') {
 document.getElementById("table1").style.display = 'none';
 document.getElementById("table2").style.display = 'block';
document.getElementById("table3").style.display = 'none';
document.getElementById("link1").style.background = 'none'; 
document.getElementById("link3").style.background = 'none'; 
   }
}
if(id==3){
 if(document.getElementById("table3").style.display != 'block') {
 document.getElementById("table2").style.display = 'none';
 document.getElementById("table3").style.display = 'block';
document.getElementById("table1").style.display = 'none';
document.getElementById("link1").style.background = 'none'; 
document.getElementById("link2").style.background = 'none'; 
   }
}
}
</script>
<div class="last_bg">
<table width="30%"><tr><td width="110px"><div class="last">
<a href="javascript: table('1');" id="link1">Таблица 1</a></div></td><td width="110px">
<div class="last2"><a href="javascript: table('2');" id="link2">Таблица 2</a></div></td><td width="110px">
<div class="last2"><a href="javascript: table('3');" id="link3">Таблица 3</a></div></td></tr></table>
<br>
<div id='table1' style="display: block">1</div>
<div id='table2' style="display: none">Таблица 2</div>
<div id='table3' style="display: none">Таблица 3</div>
</div>

javascript табове

aquafresh

Registered

gLaVoReZa

Registered

aquafresh

Registered

shterev

Registered

gLaVoReZa

Registered

gLaVoReZa

Registered

aquafresh

Registered

aquafresh

Registered

marian

Registered

aquafresh

Registered

marian

Registered

aquafresh

Registered