Tab nasıl linkleniyor ? - Sayfa 2

17-09-2019, 00:06:20

#10

OziyWeb

Kurumsal Üye

HaYLaZ adlı üyeden alıntı: mesajı görüntüle

soyle sorayim ozaman
kullandigin tab slider seklindemi yani wizard tab seklindemi ona gore cevap verelim.
yok eger normal bir tab ise her tanin kendi icerigi oldugu icin yine idleri ile erisebilirsin. bence bir.gorsel ile anlatirsan daha net cevap verilebilir

Burdaki idsi #tab-3 olanı yukarıda bir a tagı var ona tıklayınca sayfanın kayıp bu tagın aktif olmasını istiyorum

17-09-2019, 08:08:53

#11

şimdi anladım. Şöyle yapacaksın ozaman.;

Tablarının şöyle olduğunu varsayalım

<div id="tabs">
<ul>
<li><a id="link1" href="#tab-1">tab1</a></li>
<li><a id="link2" href="#tab-2">tab2</a></li>
</ul>
<div id="tab-1">
Tab 1 içeriği
</div>
<div id="tab-2">tab 2 içeriği</div>
</div>

İstediğin sekmeye gitmek için a linki içerisine ilgili taba ait click fonksiyonu vereceksin sanki tabın kendi sekmesine tıklanıp açılmış gibi olacak.
Örneğin;

<a id="tab2aktifle" onclick='$("#link2").trigger("click");'>tab2 içeriğini aktifle</a>

tüm kodlar;

<a id="tab2aktifle" onclick='$("#link2").trigger("click");'>tab2 içeriğini aktifle</a>
<ul>
<li><a id="link1" href="#tab-1">tab1</a></li>
<li><a id="link2" href="#tab-2">tab2</a></li>
</ul>
<div id="tab-1">
Tab 1 içeriği
</div>
<div id="tab-2">tab 2 içeriği</div>
</div>

Javascirpt kısmıda şöyle;

 $(function() {
$( "#tabs" ).tabs();
});

Bunun birkaç yolu var bu basit bir yöntem. Eğer scroll barın aktif taba kaymasını istiyorsan aşağıdaki gibi bir kod kullanabilirsin.

 $('html, body').animate({
scrollTop: $("#tabs").offset().top
}, 2000);

Diğer yöntem ise direk Dom ile etkileşime girerek eleman idsi ile de yapabilirsin.
Örneğin aşağıdaki gibi yapabilirsin (Test etmedim)

$(document).ready(function (){
$("#tab1").click(function (){ //açılmasını istediğin taba ait verdiğin link idsi
var tablar = document.getelementbyid('#tabs'); // dom içerisindeki tabs divini bul
$('html, body').animate({ // tabs divine sayfayı kaydır
scrollTop: $("#aktiflenecek-tab-idsi").offset().top
}, 2000);
tablar.tabs({ active: $('#tabs ul').index($('#aktiflenecek-tab-idsi')) }); //aktiflenecek-tab-id si olan tabi aktifle
});
});

17-09-2019, 10:09:06

#12

OziyWeb

Kurumsal Üye

HaYLaZ adlı üyeden alıntı: mesajı görüntüle