Jak zrobić zakładki w czystej javie script?

Dla specjalistów Webmastering
#1

cześć

 

jak zrobić zakładki w czystej javie script?

 

co się nauczyć bo nie wiem?

#2

javascript to nie odmiana javy, więc odmieniasz całość a nie połowę nazwy.

Pytanie powinieneś bardziej opisać bo nie wiadomo o co ci konkretnie chodzi.

#3

To jak zrobić przykład?

 

http://webmade.org/porady/dynamiczne-zakladki-dhtml-js.php

#4

Czego nie rozumiesz z tutka którego podlinkowałeś ? Masz tam przykład, kod do niego i opis.

#5

Mi chodzi ja kzrobić samenu coś takiego?

#6

Napisać tak jak w tutorialu.

#7

W javiescript możesz sterować elementami styli css, czyli np. widocznością warstw. Jak wiesz co to div i w css “widoczność” warstwy to sobie poczytaj i zrobisz bez problemu.

#8

Menu mi się nie załancza poprawi ktoś:

<html>
<head>
  <title>www</title>

<style>
.polozeniestrony {
  margin:0 auto;
  width:1000px;
 position:relative; top:-25px;
  min-height: 500px;
  }

.header,.glowny {
  position:relative;
  float:left;
  clear:both;
  width:1000px; }

.header {
background: no-repeat url('logo1.jpg');
background-size:1000px 250px;

  height:250px;
   position:relative;
   top:0px;
  }
.menupoziome{
background: no-repeat url('menu.jpg');
 width: 1000px;
 height: 50px;
 color: white;
 font-size: 20px;
 font-family: tahoma;
 position:relative; top:5px;
}

.zawartosc{
height: 800px;
width: 1000px;
float: left;
background: no-repeat url(logo.jpg);
background-size:1000px 800px;
color: white;
font-family: tahoma;
font-size: 20px;
position:relative; top:10px;
}

.tekst1,h1{font-size:15px;
margin: 30px;
color: white;
}
.zawartosc h1
{
color: white;
font-style: italic;
}
.footer
{font-family:tahoma;
width: 1000px;
height: 70px;
float: left;
color: white;
background: no-repeat url(stopka.jpg);
position:relative; top:15px;

}
.stopka p
{
height: 80px;
width:1000px;
clear:both;
}

.menupoziome .menu {
  position:absolute;
  top:0;
  margin-left: 40px;
  margin:0;
  padding-top:0;
  height:40px;
  list-style:none; }
 
.menupoziome .menu li {
  display:block;
  float:left;
  clear:none;
  margin-left:25px;
  padding:0 0 0 0;  
  height:40px;
  line-height:40px;}
 
.menupoziome .menu li a {
  color:#fff;
  text-decoration:none;
   }
.glowny {
float:left;
clear:none;
width:1000px;
}
.glowny2{
left:140px;
color:white;
float:left;
width:1000px;
position:relative; top:-870px;
}
</style>
</head>
<body>
<script type="text/javascript">
function pokaz_ukryj(pokaz, ukryj) {
    document.getElementById(pokaz).style.display = "block";
    document.getElementById(ukryj).style.display = "none";
}
</script>
<div class="polozeniestrony" id="top">
<div class="header"></div>
<div class="glowny">
        <div class="menupoziome">
          <ul class="menu">
           <li><a href="javascript:void(pokaz_ukryj('tekst1', 'tekst2'))">Strona Glowna</a></li>
        <li><a href="javascript:void(pokaz_ukryj('tekst2', 'tekst1'))">Ryby</a></li>
        <li><a href="javascript:void(pokaz_ukryj('tekst3', 'tekst4'))">Rosliny</a></li>
        <li><a href="javascript:void(pokaz_ukryj('tekst4', 'tekst3'))">Inne zwierzeta</a></li>
        <li><a href="javascript:void(pokaz_ukryj('tekst5', 'tekst6'))">Sprzet</a></li>
        <li><a href="javascript:void(pokaz_ukryj('tekst6', 'tekst5'))">Galeria</a></li>
        </ul>
        </div>
      <div class="zawartosc">
      
      </div>
      <div class="stopka">
      <p>Stopka</p>
      </div>
      </div>
</div>
<div class="glowny2">
<div id="tekst1">
jeden
</div>
<div id="tekst2"style="display:none">
dwa
</div>
<div id="tekst3">
trzy
</div>
<div id="tekst4"style="display:none">
cztery
</div>
<div id="tekst5">
piec
</div>
<div id="tekst6"style="display:none">
szesc
</div>


</div>
</body>
</html>
#9

Musisz zmodyfikować trochę skrypt:

<script type="text/javascript">
function pokaz_ukryj(pokaz) {
	var warstwy = ["tekst1","tekst2","tekst3","tekst4","tekst5","tekst6"];
	for(i=0;i<6;i++)
	{
		document.getElementById(warstwy[i]).style.display = "none"
	
	}
    document.getElementById(pokaz).style.display = "block";
}
</script>

Skrypt najpierw ukrywa wszystkie warstwy za pomocą pętli a następnie pokazuje tą porządaną “pokaz”.

Natomiast linki powinny wyglądać tak.

<ul class="menu">
           <li><a href="javascript:void(pokaz_ukryj('tekst1'))">Strona Glowna</a></li>
        <li><a href="javascript:void(pokaz_ukryj('tekst2'))">Ryby</a></li>
        <li><a href="javascript:void(pokaz_ukryj('tekst3'))">Rosliny</a></li>
        <li><a href="javascript:void(pokaz_ukryj('tekst4'))">Inne zwierzeta</a></li>
        <li><a href="javascript:void(pokaz_ukryj('tekst5'))">Sprzet</a></li>
        <li><a href="javascript:void(pokaz_ukryj('tekst6'))">Galeria</a></li>
        </ul>

Oraz

<div class="glowny2">
<div id="tekst1">
jeden
</div>
<div id="tekst2" style="display:none">
dwa
</div>
<div id="tekst3" style="display:none"> 
trzy
</div>
<div id="tekst4"style="display:none">
cztery
</div>
<div id="tekst5" style="display:none">
piec
</div>
<div id="tekst6" style="display:none">
szesc
</div>


</div>
#10

Ok dzięki wielkie działa temat można zamknąć.