Porada w sprawie skryptu jquery

[Szymon80]

Witam.

Mam mały problem z zakładkami z tej strony

https://jqueryfordesigners.com/jquery-tabs/

Bardzo fanjny i prosty skrypt jquery, ale ma małą wadę. Po przełądowaniu strony nie zapamiętywało na której zakładce była ustawiona strona.

Ale znalazłem w komentarzach wersję która taką funkcję posiada:

  $(function () {
	  var tabContainers = [];
	  $('ul.tabs a').each(function () {
		// note that this only compares the pathname, not the entire url
		// which actually may be required for a more terse solution.
		  if (this.pathname == window.location.pathname) {
			  tabs.push(this);
			  tabContainers.push($(this.hash).get(0));
		  }
	  });
	  // sniff for hash in url, and create filter search
	  var selected = window.location.hash ? '[hash=' + window.location.hash + ']' : ':first';
	  tabs.click(function () {
		  // hide all tabs
	  tabContainers.hide().filter(this.hash).show();
		  // set up the selected class
		  $(tabs).removeClass('selected');
		  $(this).addClass('selected');
		  return false;
	  }).filter(selected).click();
  });

Nie wiem dlaczego, ale teraz zakładki nie chcą się chować jedna pod drugą.

Poniżej podaje linki do skryptu orginalnego (tabs1) i z modyfikacją (tabs2)

Tabs1

https://dobry-katalog.cba.pl/x/tabs1.html

Tabs2

https://dobry-katalog.cba.pl/x/tabs2.html

Jak ktoś ma pomysł jak to naprawić to będę wdzięczny. Ja walcze z tym już kilka ładnych godzin i nie wpadłem na rozwiązanie.

A poniewąż js i jquery nie znam za bardzo to błądzę jak ślepy w ciemnościach.

Proszę o podpowiedz.

[sorrow]

OnClick ----> Setcookie TAB = [ Aktualna karta ]

Funkcja on Domready -> pobierz ciastko Getcookie TAB -> pokaz dana kartę

Taki koncept, 4 rano może jutro napisze kod

[Szymon80]

mowisz o jakimś nowym kodzie/skrypcie ?

Mi bardziej zależy na naprawieniu tego z któego korzystam.

[sorrow]

Potrzebujesz jeszcze plugina JQuery Cookie https://plugins.jquery.com/project/cookie

<script type="text/javascript" charset="utf-8">

$(function () {

if ( $.cookie("tab") != 'undefined' ) {

zaznacz = $.cookie("tab");

$("a[href="+ zaznacz +&quot]").addClass('selected');

} else zaznacz = ':first';

var tabContainers = $('div.tabs > div');

tabContainers.hide().filter(zaznacz).show();

$('div.tabs ul.tabNavigation a').click(function () {

tabContainers.hide();

tabContainers.filter(this.hash).show();

$.cookie("tab", this.hash);

$('div.tabs ul.tabNavigation a').removeClass('selected');

$(this).addClass('selected');

return false;

}).filter(zaznacz).click();

$(zaznacz).addClass('selected');

});

</script>

[Szymon80]

Dzięki wielkie, działa prawie dobrze. Problem teraz polega na tym że ktoś kto nie był jeszcze na danej stronie i nie mam cookie zapisanego u siebie to nie zobaczy zadnej zakładki.

przykład:

https://dobry-katalog.cba.pl/x/tabs3.html

dobrze by było aby domyślnie pokazywała się pierwsza zakładka.

Nie dało by się jednak tak przerobić tego skryptu z mojego pierwszego postu, aby można było skierować kogoś linkiem od razu na daną zakłądkę ? Czyli z odpowiednim parametrem na końcu adresu ?

[sorrow]

else zaznacz = ':first';

Zmień to na swoja wartość

[Szymon80]

ale ja mam właśnie wartość "first" więc powinno działać. Zresztą w przykładzie jest pokazane.

[sorrow]

if ( $.cookie("tab") != undefined || $.cookie("tab") != null  ) {

[Szymon80]

Ok wielkie dzięki za pomoc.

[Szymon80]

Jeszcze jedno pytanko.

@sorrow, Dzieki za pomoc w powyższym skrypcie, przyda się z pewnością na mojej stronie, jednak trochę przypadkiem udało mi się uzyskać taki sam efekt w skrypcie z pierwszego wątku poprzez małą modyfikację .

Teraz skrypt wygada tak:

 $(function () {
	  var tabContainers = [];
	  $('ul.tabs a').each(function () {
		  if (this.pathname == window.location.pathname) {
			  tabs.push(this);
			  tabContainers.push($(this.hash).get(4));
		  }
	  });
	  var selected = window.location.hash ? '[hash=' + window.location.hash + ']' : ':first';
	  var tabContainers = $('div.tabs > div');
	  $('div.tabs ul.tabNavigation a').click(function () {
	  tabContainers.hide();
			  tabContainers.filter(this.hash).show();
		  $(tabs).removeClass('selected');
		  $(this).addClass('selected');
		  return false;
	  }).filter(selected).click();
  });

Przykłąd działania można zobaczyć tutaj >>> https://dobry-katalog.cba.pl/x/tabs2.html

Co zmienić w powyższym skrypcie lub może w stylach (albo nawet w jquery w pliku jq132.js ) aby wyeleminować skakanie za każdym razem po wcisnięcu którejs zakładki ? Efekt taki jest na https://dobry-katalog.cba.pl/x/tabs1.html tam układ strony jest identyczny i problem pewnie tkwi w skrypcie.

Jeżeli ktoś dostrega gdzie może być problem to prosze o radę.

pozdrawiam.