usuwanie klasy aktive z div i zwijanie drugiego diva

Hej,

jestem nowa w javaScript ale rozentuzjazmowana, bo zrobilam pierwszy raz w zyciu handmade TABS i dzialaja oraz pieknie wygladaja. Problem tylko taki, ze musze dodac jeden mechanizm i od rana nad tym siedze, kombinuje i nic. Prosze o pomoc.

To moje TABSY, w wersji uproszczonej

<div class="tabs">

<ul class="tabs-list">
 	<li class="esg"><a href="#tab1">Pierwszy tekst</li>
 	<li class="imp"><a href="#tab2">Drugi tekst</li>
 	<li class="sus"><a href="#tab3">Trzeci tekst</li>
</ul>

<div id="tab1" class="tab active">
tresc pierwszego tekstu
</div>

<div id="tab2" class="tab">
tresc drugiego tekstu
</div>
<div id="tab3" class="tab">
tresc trzeciego tekstu
</div>

</div>

A to moj skrypt:

$(document).ready(function(){

  $(".tabs-list li a").click(function(e){
     e.preventDefault();
  });

  $(".tabs-list li").click(function(){
     var tabid = $(this).find("a").attr("href");
     $(".tabs-list li,.tabs div.tab").removeClass("active");   // removing active class from tab

     $(".tab").hide();   // hiding open tab
     $(tabid).show();    // show tab
     $(this).addClass("active"); //  adding active class to clicked tab

  });

});

Chodzi o to, żeby po ponownym kliknięciu na ten sam link, rozwinięty tekst się schował.

A teraz rozwinięty tekst się chowa, jak się kliknie na drugi link.

Wszystko startuje z 3 zwiniętymi linkami, a na końcu zawsze jest jeden otwarty. A chodzi o to, żeby po przeczytaniu, wszystkie zostały zwinięte.

Baaardzo proszę o zaoszczędzenie mi siwych włosów. Kombinuję w tym malutkim skrypcie, kombinuję ale ciągle nic. :(

Hmmm, spróbuj z https://api.jquery.com/toggleclass/

Ewentualnie https://getbootstrap.com/docs/4.3/components/collapse/

Dziekuje! Zaraz bede probowac , jeszcze tych opcji nie analizowalam. :)

Znalazłem podobny kod do tego, który podałaś, tutaj: https://makitweb.com/simple-tabbed-content-area-with-html-css-and-jquery/ Jeśli to jest to, to spróbuj zmienić kod JavaScript w ten sposób jak poniżej. Jest to rozwiązanie pisanie na kolanie, więc na pewno nie jest najlepsze; ale wydaje się działać. Starałem się, by nie zmieniać Twojego obecnego kodu, a raczej do niego dodawać.

// POCZĄTEK ZMIANY
let lastClickedTabID = "#tab1";
let currentTabHidden = false;
// KONIEC ZMIANY

$(document).ready(function() {
  $(".tabs-list li a").click(function(e) {
    e.preventDefault();
  });
  $(".tabs-list li").click(function() {
    var tabid = $(this).find("a").attr("href");
    $(".tabs-list li,.tabs div.tab").removeClass("active"); // removing active class from tab
    $(".tab").hide(); // hiding open tab

    // POCZĄTEK ZMIANY
    if (lastClickedTabID !== tabid) {
      $(tabid).show();
    } else {
      if (currentTabHidden === true) {
        $(tabid).show();
        currentTabHidden = false;
      } else {
        $(tabid).hide();
        currentTabHidden = true;
      }
    }
    lastClickedTabID = tabid;
    // KONIEC ZMIANY

    $(this).addClass("active"); //  adding active class to clicked tab
  });
});

UPDATE: Zmiennej lastClickedTabID nadałem wartość początkową #tab1, ponieważ zakładka o takim ID jest ustawiona jako aktywna na początku (u Ciebie nie jest).

Wow! Silv, chciałabym tak pisać na kolanie!! Wyobrazam sobie jakie cuda tworzysz pisząc nie na kolanie! SZACUN!
Bardzo dziękuję za pomoc. Absolutnei nie spodziewałam się takiego gotowca, więc chylę czoła.

Dokładnie na bazie tego tutorialu robiłam ten mechanizm.

Teraz pieknie zamyka się po kliknięciu, a w zasadzie 2 kliknięciach. Ale to już wstyd jakbym nie doszła do tego sama dlaczego po dwóch kliknięciach. :D

No wiesz… trochę czasu poświęciłem, by sobie przypomnieć, jak działa JavaScript/jQuery, zanim zacząłem w ogóle pisać, więc "na kolanie" nie znaczy tutaj "w 5 minut". ;) Znaczy, że to pierwsze, co przyszło mi do głowy, i nie rozważałem, czy najlepsze możliwe.

To, że trzeba dwa razy kliknąć, to dziwne. U mnie wystarczy raz. No, ale ja korzystałem z kodu z tej znalezionej strony. Kod JavaScript wydaje się taki sam. Może coś w HTML-u jest inaczej, co powoduje potrzebę drugiego kliknięcia?

UPDATE: Jak teraz sprawdziłem, u mnie też dwa razy trzeba. Dziwne, pamiętam, że było raz. Spróbuję ustalić, co to (ale jeśli nie chcesz, nie muszę Ci podpowiadać).

UPDATE2: Mój błąd – jednak wystarczy u mnie raz.

UPDATE3: Tutaj wersja z Twoim HTML-em: https://jsfiddle.net/opxy7euz/ Wystarczy raz kliknąć. Oczywiście musisz kliknąć dwa razy, przechodząc z innej karty.

Dziękuję, że jeszcze to analizujesz. Hmm, może ją kombinuję jak zając pod górkę, ale przyjmijmy scenariusz:

1. Klikam na pierwszy, żeby otworzyć pierwszy tekst

2. Klikam na pierwszy, żeby go zamknąć

3. Kilkam na drugi, żeby otworzyć drugi tekst

4. i właśnie tutaj trzeba kliknąć na drugi dwa razy , żeby go zamknąć

To, co napisałaś, to właśnie tak, jak to teraz działa, i jak powinno działać – według mnie, oczywiście.

A Ty chciałabyś zrobić coś takiego… że jeśli tekst wskazywany przez bieżącą zakładkę będzie schowany (="zamknięty"), to zmiana zakładki nie spowoduje pokazania jej tekstu. Inaczej mówiąc, kliknięta zakładka zostanie podświetlona (=zmieni kolor), jak obecnie, ale tekst przez nią wskazywany nie zostanie pokazany. Dobrze rozumiem?

Hmm, chodzi właściwie o to, żeby ktoś mając trzy zakładki

Otworzył/przeczytał/zamknął zakładkę A

Otworzył/rzeczytal/zamknął zakładkę B

Bo naturalne jest, że jak wszystkie 3 są zamknięte, to kliknie się na pierwszą - pokaże się pierwszy tekst

Potem od razu kliknie się na 2 zakładkę to bez zamykania pierwszego tekstu (poprzez ponowne kliknięcie pierwszej zakładki) pokaże się drugi tekst.

Ale jakby jakiś dziwny odbiorca strony chciał kliknąć na pierwszą zakładkę, otworzyć tekst, przeczytać go a potem ponownie kliknajac na zakładkę nr 1 go zamknąć?

To wtedy po zamknięciu tego pierwszego tekstu, kliknąwszy na zakładkę nr 1, jak się otworzy drugi tekst kliknięciem na zakładkę nr 2, to żeby zamknąć ten tekst, tzreba właśnie 2 razy kliknąć na zakładkę.

Też w tym JSFiddle. :)

Jeżeli dobrze zrozumiałem, to chodzi Ci o sytuację, w której przechodząc z zakładki wskazującej na schowany tekst nr X na zakładkę nr Y, trzeba kliknąć dwa razy na zakładkę nr Y, by schować tekst przez nią wskazywany.

Rzeczywiście, taka sytuacja występuje w kodzie, który wyżej zamieściłem. Z tego, co udało mi się na szybko ustalić, chodzi o to, że po przejściu na zakładkę nr Y zmienna currentTabHidden jest wciąż ustawiona na true (to true to jeszcze stan poprzedniej zakładki); to powoduje, że interpreter JavaScriptu myśli, że jest ona zamknięta, więc przy pierwszym kliknięciu ją pokazuje (czyli wykonuje $(tabid).show();). Dopiero przy drugim kliknięciu ją chowa (czyli wykonuje $(tabid).hide();).

Rozwiązaniem tego problemu jest zmiana kodu w ten sposób:

if (lastClickedTabID !== tabid) {
  $(tabid).show();

  // POCZĄTEK ZMIANY
  currentTabHidden = false; // jeśli jest to inna zakładka, to poinformuj interpreter JavaScriptu, że jest ona otwarta
  // KONIEC ZMIANY
} else {
  ...
}

Dzięki tej zmienie interpreter JavaScriptu od razu ustawia status zakładki Y na "widoczna".

UPDATE: Tutaj kod: https://jsfiddle.net/rwx2mtkd/12/ — Możesz prześledzić działanie: naciśnij F12 (jeśli jesteś na Firefoxie), kliknij na zakładkę Konsola i poklikaj na zakładki. Zwróć uwagę, kiedy pokazuje się showing1, a kiedy showing2.

Silv, nie ma słów na to żeby wyrazić moją wdzięczność! Oficjalnie dziś zostałeś moją Muzą do nauki JavaScript .

Bardzo dziękuję za pomoc!!!

Hej,

tak, dziekuje. Przeanalizowalam kod i wyciagnelam wnioski. JavaScript jest niesamowity! Niesamowity ale tez trudny. Pocieszam sie jednak , ze wszytsko na poczatku wydaje sie a z czasem, wraz z poszerzaniem wiedzy i doswiadczenia staje sie prostrze.

Od 2 dni walcze jeszcze z opcja scrollowania do otwartej zawartosci kliknietej TAB. Wg mnie to po prostu powinno dzialac ale nie dziala. Czy moze powinnam ten kod umiesicc w innym miejscu lub w zewnetrznej funkcji?

Skrollowanie do anchor na calej stronie dziala pieknie,ale wewnatrz tych zkladek po prostu nie chce zadzialac.

// POCZĄTEK ZMIANY
let lastClickedTabID = "#tab1a";
let currentTabHidden = false;
// KONIEC ZMIANY

$(document).ready(function() {
  $(".tabs-list li a").click(function(e) {
    e.preventDefault();
  });
  $(".tabs-list li").click(function() {
    var tabid = $(this).find("a").attr("href");
    $(".tabs-list li,.tabs div.tab").removeClass("active"); // removing active class from tab
    $(".tab").hide(); // hiding open tab
 
    // POCZĄTEK ZMIANY
    if (lastClickedTabID !== tabid) {
      $(tabid).show();

	  // POCZĄTEK ZMIANY
  currentTabHidden = false; // jeśli jest to inna zakładka, to poinformuj interpreter JavaScriptu, że jest ona otwarta
  // KONIEC ZMIANY
    } else {
      if (currentTabHidden === true) {
        $(tabid).show();
        currentTabHidden = false;
      } else {
        $(tabid).hide();
        currentTabHidden = true;
      }
    }
    lastClickedTabID = tabid;
    // KONIEC ZMIANY

    $(this).addClass("active"); //  adding active class to clicked tab
 

// moj kod do skrollowania do otwartego diva

$('.tabs-list li a').bind('click',function(event){
			var $anchor = $(this);
		
		  	$('html, body').stop().animate({
			  scrollTop: $($anchor.attr('href')).offset().top
		  	}, 500,'easeInOutExpo');
		
			event.preventDefault();
		});


 });
});

Z tego, co rozumiem, to chciałabyś, by strona "zjechała" do początku elementu z tekstem przypisanym do zakładki. Zauważ, że to rodzi pewien problem – żeby przełączyć się na inną zakładkę, użytkownik będzie musieć samemu wrócić w miejsce, w którym kliknął.

Jeśli jednak chcesz to zrobić, to zamień ten kod:

$('.tabs-list li a').bind('click', function(event) {
    var $anchor = $(this);

    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 500, 'easeInOutExpo');

    event.preventDefault();
});

na ten:

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

Animacja powinna działać.

Na jQuery w zasadzie się nie znam – ot, używałem kilka razy. Tutaj robiłem "na czuja".

A z użyciem słowa kluczowego this w JavaScripcie polecam uważać. Jeśli używasz tego w jakimś sprawdzonym przykładzie z internetu, to może rzeczywiście działać. Ale ogólnie zmienna this nie zawsze intuicyjnie jest ustawiana, przynajmniej w przykładach przeze mnie oglądanych; względem tego czasem możesz myśleć, że this prerezentuje jeden obiekt – a naprawdę prerezentuje inny. W przypadku jQuery – nie wiem; może tam this działa inaczej niż w zwykłym kodzie JavaScript.

Bardzo dziekuje Silv, tyle nad tym siedzialam ale w zyciu bym na to nie wpadla! Dziekuje za uwage na temat funkcji this, poczytam na ten temat.

Pozdrowienia
coliberek

Dobry wieczor,

przykro mi, ze znowu zawracam gitarę w temacie, ale nie mogę poradzić sobie z pewną kwestią.Po prostu nie rozumiem dlaczego tak się może dziać.

Dostałam sygnał, że na Macu i w safari i w chrome, gdy klika sie pomiedzy zakladkami i strona przescrollowuje się w miejsce otwartego diva, całość DRGA.

Przeczesuje "Internety" , testuje rozne rozwiazania ale dalej jest problem. Zmienilam np na $(window).load(); zamiast of $(document).ready(); zgodnie z poradami na https://stackoverflow.com/questions/24851042/cross-browser-issue-with-jquery-offsettop-returning-different-values

Ale np na stronie https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_smooth_scroll_jquery nic ie drga w Chrome,Safari na Macu.

Bede bardzo, bardzo wdzieczna za to ostatnie kolo ratunkowe....

Jak napisałem w komentarzu, nic nie wiem w temacie, ale może chociaż zadam jakieś pytania, które nakierują w (miejmy nadzieję) dobrą stronę.

1. Pokaż kod przed jakimikolwiek zmianami związanymi z tym problemem.
2. Pokaż kod po tych zmianach (na wszelki wypadek; może już niewiele brakuje, by działał).
3. Czy wiadomo Ci, że problem występuje jedynie w Safari i Chrome na Macu – czy też w Safari i Chrome na Windowsie i/lub Linuxie, i/lub innych systemach?

UPDATE:

4. Jakie wersje mają Safari i Chrome, na których występuje ten problem?

Czesc Silv,

dziekuje za odpowiedz. Wlasnie to bardzo dziwne, bo np na ipadzie w safari jest ok, a jak na zlosc na komputerze wlasciciela strony jest zle. To nie wymowka, bojak wiadomo strona musi dzialac dobrze wszedzie, jednak to strasznie irytujace.

Drgania zaczely sie jak dodalismy kod

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

ale bez tego kodu, okno nie bedzie przejezdzalo w miejsce otwartego diva. :(

Mam nawet video jak wyglada to drganie... filmik

Zaraz sprobuje dowiedziec sie jaka wersja safari i chrome.

dziekuje Silv

Dzis naprawilam to sama i jestem z siebie bardzo dumna. Przeczesywalam rozne fora, probowalam rozne zmiany, czytalam na temat drgan animacji scroll na Macu i... w koncu gdy dodalam do styli css body

height: 100%;
overflow-y: scroll;
overflow-x: hidden;

oraz zmienilam szybkosc scrollowania z 2000 na 800

    $('html, body').animate({
            scrollTop: $(lastClickedTabID).offset().top
        }, 800);

BOOOM! Zaczelo dzialac bez zadnych drgan. :)

Jeszcze raz Silv, bardzo dziekuje za niesienie pommocy poczatkujacym owieczkom.

Tym razem nie zaniosłeś, ale wcześniej tak. Mogłeś w ogóle machnąć ręką a jednak starałeś się coś podpowiedzieć. Rzadko sie zdarza tak dobre serce. :)

Nie, nie udało mi się zreprodukować drgań u siebie. Mam ipada, ale na nim w safari było ok. Myślałam, że to właścicielka strony ma jakiś dziki komputer ale koleżanka wysłała mi drugie video , z drganiami ze swojego komputera.

OK, rozumiem. Cieszę się, że wyszło.