Kodları lütfen aşağıdaki butonları kullanarak renklendirin. Örnek: <php> echo "Selam Dünya"; </php>
Yardım
karakter kaldı

Basit Tab menu yapmak

Selam arkadaşlar basit bir tab menu yapmam gerekiyor. ajax jquery vs kullanmadan yapılacak.
yardımcı olabilecek varsa çok sevinirim
unordered listdeki li taglarını sayıp hangi li tagı click edildiyse o tag ile ilişkilendireceğim boxu kullanmak istiyorum .


<!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=utf-8" />
<script>
function call(){
var td= document.getElementById('tab');
var liler=td.getElementsByTagName('li');
for(i=0;i<liler.length;i++)
{
liler[i].onclick= function ()
{
var boxdeneme="box"+i

document.getElementById('boxDeneme').style.visibility ='visible';
}

}
}
</script>
</head>
<body>

<div id="tab">
<li><a href="#" onclick="call()">tab0</a></li>
<li><a href="#" onclick="call()">tab1</a></li>
<li><a href="#" onclick="call()">tab2</a></li>
<li><a href="#" onclick="call()">tab3</a></li>
<li><a href="#" onclick="call()">tab4</a></li>
</div>

<div id="box">
<div id="box0">

<p> buraya tab0 bilgileri yazıcalacak</p>
</div>
<div id="box1" >

<p> buraya tab1 bilgileri yazıcalacak</p>
</div>
<div id="box2">

<p> buraya tab2 bilgileri yazıcalacak</p>
</div>
<div id="box3">

<p> buraya tab3 bilgileri yazıcalacak</p>
</div>
<div id="box4">

<p> buraya tab4 bilgileri yazıcalacak</p>
</div>

</div>
</body>
</html>
+0
-0
Cevaba KatılıyorumKatılmıyorum 		Cevap Yaz Yorum Yaz Arşivime Ekle Takip Et

Doğru Cevap

  • sevketbulamaz adlı üyenin fotoğrafı
    12 yıl önce yazılmış
    sevketbulamaz
    56 cevap - 0 soru
    <!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=utf-8" />
    <script>
    window.onload = function(){
    var td = document.getElementById('tab');
    var liler = td.getElementsByTagName('li');

    var mainDiv = document.getElementById('box');
    var allDiv = mainDiv.getElementsByTagName('div');
    for(i=0;i<liler.length;i++) {
    liler[i].setAttribute('rel','box'+i);
    liler[i].onclick = function() {
    hideAll(allDiv);
    setSelected(liler, this.getAttribute('rel').replace('box',''));
    }
    }
    }

    var hideAll = function(array) {
    items = array || [];

    for(i=0;i<items.length;i++) {
    items[i].style.display = 'none';
    }
    }

    var setSelected = function(array, selected) {
    var items = array || [];
    for(i=0;i<items.length;i++) {
    removeClass(items[i], 'selected');
    }
    addClass(items[selected], 'selected');
    document.getElementById('box'+selected).style.display = 'block';
    }

    function hasClass(ele,cls) {
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
    }

    function addClass(ele,cls) {
    if (!this.hasClass(ele,cls)) ele.className += " "+cls;
    }

    function removeClass(ele,cls) {
    if (hasClass(ele,cls)) {
    var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
    ele.className=ele.className.replace(reg,' ');
    }
    }
    </script>

    <style>
    #tab { list-style: none; padding: 0; margin: 0; width:auto; height: 25px; display:block; }
    #tab li { height:25px; width: auto; float: left; padding: 0; margin:0; }
    #tab li a { height: 25px; width:auto; display:block; padding:0 5px; font:normal 11px/25px Verdana, Geneva, sans-serif; color: #000; border: #000 1px solid; text-decoration:none; }
    #tab li a:hover { background: #999 none; }
    #tab li.selected a { background: #999 none; }
    #box div { display: none; width: 450px; height:260px; border: #000 1px solid; margin-top:1px;}
    </style>
    </head>
    <body>

    <ul id="tab">
    <li><a href="#">tab0</a></li>
    <li><a href="#">tab1</a></li>
    <li><a href="#">tab2</a></li>
    <li><a href="#">tab3</a></li>
    <li><a href="#">tab4</a></li>
    </ul>

    <div id="box">
    <div id="box0">

    <p> buraya tab0 bilgileri yazıcalacak</p>
    </div>
    <div id="box1" >

    <p> buraya tab1 bilgileri yazıcalacak</p>
    </div>
    <div id="box2">

    <p> buraya tab2 bilgileri yazıcalacak</p>
    </div>
    <div id="box3">

    <p> buraya tab3 bilgileri yazıcalacak</p>
    </div>
    <div id="box4">

    <p> buraya tab4 bilgileri yazıcalacak</p>
    </div>

    </div>
    </body>
    </html>

    geliştirilebilir...
    • omercyprus adlı üyenin fotoğrafı omercyprus
      daha basit bişi olmazmı ya :D sadece visiblity açıp kapatarak filan ?
      12 yıl önce yazılmış
    • omercyprus adlı üyenin fotoğrafı omercyprus
      Teşekür etmeyi unuttum kusura bakmayan gerçekten uğraşıp yazdıysanız helal olsun :) daha basit düşünüyom ama pek mümkün olmucak sanırım inceledim fonksiyonları biraz daha düşüncem
      12 yıl önce yazılmış
    • sevketbulamaz adlı üyenin fotoğrafı sevketbulamaz
      jquery yada başka bir javascrip kütüphanesi kullanmamayı düşünmüşsün. verdiğin kod da bu şekilde idi. jquery kullanarak bu yapıyı bir kaç satıra indirgeyebilirsin. bu fonksiyonları hızlıca yaptım biraz düşünülürse daha fazla kısıntı yapılabilir ancak çok da kısalacağını zannetmiyorum.
      12 yıl önce yazılmış
    • omercyprus adlı üyenin fotoğrafı omercyprus
      yok kütüphane kullanmak istemiyorum çok faydalı olmuyor ben için çok basitte olsa bişiler yazıp javascriptte kendim bişiler yapabilecek hale gelince jqueery yada diğer kütüphaneleri kullanmak istiyorum. ornek 5 tane fonksiyon atayıp call1 call2 call3 gibi 10satırda çözebiliyom bu işi ama bu bana bişi katmıyor. sizinkini inceledim benm için çok üst seviye gibi duruyor .
      acaba unorderdlistte hangi <li> tagına tıklanılmış sadece bunu tespit etmek istesem ne yapmam gerekir
      12 yıl önce yazılmış
    • sevketbulamaz adlı üyenin fotoğrafı sevketbulamaz 
      <!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=utf-8" /> 
<script> 
window.onload = function(){ 
	var td = document.getElementById('tab'); 
	var liler = td.getElementsByTagName('li');
	for(i=0;i<liler.length;i++) {
		liler[i].onclick = function() {
			for(j=0;j<liler.length;j++) {
				if(this === liler[j]) {
					alert("ben " + (j+1) + ". li yim");
				}
			}
		} 
	} 
}
</script>

<style>
	#tab { list-style: none; padding: 0; margin: 0; width:auto; height: 25px; display:block; }
		#tab li { height:25px; width: auto; float: left; padding: 0; margin:0; }
			#tab li a { height: 25px; width:auto; display:block; padding:0 5px; font:normal 11px/25px Verdana, Geneva, sans-serif; color: #000; border: #000 1px solid; text-decoration:none; }
			#tab li a:hover { background: #999 none; }
			#tab li.selected a { background: #999 none; }
	#box div { display: none; width: 450px; height:260px; border: #000 1px solid; margin-top:1px;}
</style>
</head> 
<body> 

<ul id="tab"> 
<li><a href="#">tab0</a></li> 
<li><a href="#">tab1</a></li> 
<li><a href="#">tab2</a></li> 
<li><a href="#">tab3</a></li> 
<li><a href="#">tab4</a></li> 
</ul> 

</body> 
</html>


      pure javascript ile iç içe 2 döngü gerekiyor malesef. ilk döngü ilgili li lere click event 'ini atamak için. 2 li ise her click event de çalışıyor ve kendini döngüdeki diğer li lerle eşitliğini test ediyor. eşitlik keşfedincede ben x. li yim diyerek alert veriyor.
      12 yıl önce yazılmış
    • omercyprus adlı üyenin fotoğrafı omercyprus
      işte bu süper çok sağol hocam çok teşekür ederim .bunla uğraştım ama beceremeedim bi türlü
      12 yıl önce yazılmış
    • omercyprus adlı üyenin fotoğrafı omercyprus
      <!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=utf-8" />
      <script>
      window.onload = function(){
      var td = document.getElementById('tab');
      var liler = td.getElementsByTagName('li');
      for(i=0;i<liler.length;i++) {
      liler[i].onclick = function() {
      for(j=0;j<liler.length;j++) {
      if(this === liler[j]) {

      var a=j+1;

      var read=document.getElementById('box'+a).innerHTML;
      document.getElementById('contentbottom').innerHTML=read;



      }
      }
      }
      }
      }
      </script>

      <style>
      #tab { list-style: none; padding: 0; margin: 0; width:auto; height: 25px; display:block; }
      #tab li { height:25px; width: auto; float: left; padding: 0; margin:0; }
      #tab li a { height: 25px; width:auto; display:block; padding:0 5px; font:normal 11px/25px Verdana, Geneva, sans-serif; color: #000; border: #000 1px solid; text-decoration:none; }
      #tab li a:hover { background: #999 none; }
      #tab li.selected a { background: #999 none; }
      #box div { display: none; width: 450px; height:260px; border: #000 1px solid; margin-top:1px;}
      </style>
      </head>
      <body>

      <ul id="tab">
      <li><a href="#">tab0</a></li>
      <li><a href="#">tab1</a></li>
      <li><a href="#">tab2</a></li>
      <li><a href="#">tab3</a></li>
      <li><a href="#">tab4</a></li>
      </ul>

      <div id="box">
      <div id="box0">
      <p>Görev Yöneticisi basit kullanımlı arayüzü ve pek çok özelliği ile kullanıcıları ile buluşuyor. Görev yöneticisi ile bölüm yöneticileri ve şirket sahipleri tam ve kesin bilgi ile sürekli izleyerek iş ortamındaki aksaklıkları gözlemleyip kontrol altına alabilirler.
      <p> Premium İş Zekâsında iş yönetimi ile ilgili tüm görevler iş gruplarına ve kişilere göre izlenebilir. Günlük iş takibi, haftalık ve aylık planlanmış iş tablosu, kritik tarih ve reddedilmiş görevler diğer bilgiler arasında yer alıyor. Ayrıca günlük haftalık ve aylık yapılan iş takibinin izlendiği raporları filtre kriterlerine tabi tutarak detaylı izlenilebildiği gibi esnek rapor dizaynı ile istenilen yazıcı çıktısı da alınabilmektedir.
      </div>
      <div id="box1">
      <p>Apex Ticari Sistem ile işletmenizin kontrolünü kolaylıkla sağlayabilirsiniz.</p>
      <p>Apex Ticari Sistem ile unutkanlık sizin için son bulacak.</p>
      <p>Kısayol tuş tanımlama menüsü ile menülerinizdeki kısayol tuşlarını isteğinize göre tanımlayabilirsiniz.</p>
      <p>Apex Ticari Sistem ile internet üzerinden (TCP / IP protokolünü kullanarak) kolayca datalarınıza ulaşabilirsiniz.</p>
      <p>SQL Rapor desteği ile dilediğiniz raporları alabilirsiniz.</p>
      <p>İrsaliye, Teklif ve Siparişi otomatik olarak ( Satır Bazında seçim yaparak) Faturaya aktarabilirsiniz.</p>
      <p>APEX Ticari Sistemde, satır bazında ödeme ile aynı anda Nakit, Çek/Senet, Kredi Kartı, Taksit, …ile Faturanızı kapatabilirsiniz.</p>
      </div>
      <div id="box2">
      <p> Ticari Sistem ile işletmenizin kontrolünü kolaylıkla sağlayabilirsiniz.</p>
      <p> Ticari Sistem ile unutkanlık sizin için son bulacak.</p>
      <p>Kısayol tuş tanımlama menüsü ile menülerinizdeki kısayol tuşlarını isteğinize göre tanımlayabilirsiniz.</p>
      </div>
      <div id="box3">
      <p>Kısayol tuş tanımlama menüsü ile menülerinizdeki kısayol tuşlarını isteğinize göre tanımlayabilirsiniz.</p>
      <p>Apex Ticari Sistem ile internet üzerinden (TCP / IP protokolünü kullanarak) kolayca datalarınıza ulaşabilirsiniz.</p>
      <p>SQL Rapor desteği ile dilediğiniz raporları alabilirsiniz.</p>
      </div>
      <div id="box4">
      <p>PRODER Apex Ticari Sistem ile eski stoklarınızı kullanımdan kaldırabilir, gerekli gördüğünüz an tekrar kullanıma dahil edebilirsiniz.</p>
      <p>Stoklarınızın alış/satış fiyatlarına göre kar/zarar raporlarını görebilirsiniz.</p>
      <p>Stoklarınızın hareketlerini döviz birimi kullanarak yapabilirsiniz.</p>
      <p> Kargolarla ilgili sözleşme durumuna göre paket tanımlayabilme </p>
      <p> Kargo Paketlerine göre fiyat belirleyebilme </p>
      <p> Kargo ödeme durumunu takip edebilme (Karşı Ödemeli,Firma Ödemeli,Ücretli) </p>
      <p>Kargo durumunu takip edebilme (Çıkış Saati, Teslim Tarihi, Teslim Saati,..) </p>
      <p> Detaylı Kargo Raporları </p>
      </div>
      </div>
      <div id="contentbottom">
      <div>
      <p>Görev Yöneticisi basit kullanımlı arayüzü ve pek çok özelliği ile kullanıcıları ile buluşuyor. Görev yöneticisi ile bölüm yöneticileri ve şirket sahipleri tam ve kesin bilgi ile sürekli izleyerek iş ortamındaki aksaklıkları gözlemleyip kontrol altına alabilirler.
      <p>Premium İş Zekâsında iş yönetimi ile ilgili tüm görevler iş gruplarına ve kişilere göre izlenebilir. Günlük iş takibi, haftalık ve aylık planlanmış iş tablosu, kritik tarih ve reddedilmiş görevler diğer bilgiler arasında yer alıyor. Ayrıca günlük haftalık ve aylık yapılan iş takibinin izlendiği raporları filtre kriterlerine tabi tutarak detaylı izlenilebildiği gibi esnek rapor dizaynı ile istenilen yazıcı çıktısı da alınabilmektedir.
      </div>

      </div>
      </body>
      </html>


      hocam bole yaptım nasıl olmuş ?
      12 yıl önce yazılmış
    • sevketbulamaz adlı üyenin fotoğrafı sevketbulamaz
      e tabi buda bir yöntem. show-hide yerine içerik değiştirme yapmışsın.
      12 yıl önce yazılmış
    • omercyprus adlı üyenin fotoğrafı omercyprus
      evet diğer türlüsü benm için çok ağır yeni başlıyorum daha visiblity ilede yapablirim sanki buradan yola çıkarak hangi <li> tagının tıklandığını öğrendikten sonrası çok basit
      12 yıl önce yazılmış
    • omercyprus adlı üyenin fotoğrafı omercyprus
      selam tekrar ben pure javascript hakkında bilgi verebilirmisin hocam ?
      12 yıl önce yazılmış
    • sevketbulamaz adlı üyenin fotoğrafı sevketbulamaz
      yalın - sade demek pure. yani sadece javascript. hiçbir kütüphane(jquery, mootools, prototype vb...) kullanmadan javascript yazmak. native javascript yada pure javascript olarak karşına çıkabilecek bir deyim.
      12 yıl önce yazılmış
    • omercyprus adlı üyenin fotoğrafı omercyprus
      anladım sağolasın if(this === liler[j]) burada neden 3 tane eşit kullanıyoruz 2 tane ile sorunsuz çalıştı bi sebebi varmı ?
      12 yıl önce yazılmış
    • sevketbulamaz adlı üyenin fotoğrafı sevketbulamaz
      Eğer x=5 dersek;
      == operatörü eşittir anlamına gelir ve x==8 yanlış olur.
      === operatörü ise kesinlikle eşit anlamına gelir, x===5 doğru fakat x==="5" yanlış olur (rakam ve karakter ayrımı yapar).
      12 yıl önce yazılmış
    • omercyprus adlı üyenin fotoğrafı omercyprus
      ilk defa duydum bu operatörü sağoalsın bilgilendirdiğin için teşekürler .
      12 yıl önce yazılmış
    • omercyprus adlı üyenin fotoğrafı omercyprus
      peki 3 tane resim 3 tane text var elimde bunları kullanarak slider yapmak istiyorum
      img1text1 img2text2 img3text3 şeklinde olacak en basit haliyle tıkladığımda geçiş yapıcak nasıl bir yol izlemem gerekir .
      12 yıl önce yazılmış
    • sevketbulamaz adlı üyenin fotoğrafı sevketbulamaz
      eğer animasyonlu bir slider yapmak istiyorsan kütüphane kullan yok illa kullanmicam diyorsan bir kayma efekti yapman gerekiyor. içeriklerinin bulunduğu divi eksi marginleyecek bir döngü yapmalısın. bunu window.setTimeout ile bağlayıp belirteceğin süre içerisinde bir marginden bir margine geçirmelisin. açıkcası matematiksel bir fonksiyon üretmelisin kendine yada var olan bir slider matematiğini inceleyip anlamalısın. o durumda display - none - block kullanmak yerine marginLeft değerini değiştirmelisin. slider içinde kaç öğe olduğunu hesaplatıp maximum margini bulmalı ve o noktadan sonra değeri arttırmamalısın ki boşluk gözükmesin... üzerinde düşünüp kendini geliştirebileceğin bir ugulama olur. iyice araştır takıldığın notada özel mesaj at. mail adresimi vereyim daha çabuk yardımcı olabilirim.
      12 yıl önce yazılmış

Cevaplar

Hiç cevap bulunamadı.