Wyróżnienie zakładki w js

pytanie zadane 3 sierpnia 2017 w HTML i CSS przez PaulaPapiku Nowicjusz (200 p.)
zmienione kategorie 3 sierpnia 2017 przez PaulaPapiku

Mam taki kod

<li class="active"><a href="#" class="bg-po">vvvvv <span class="sr-only">(current)</span></a></li>

<li><a href="#" class="bg-wo">bbbb / Ścieki</a></li>

<li><a href="#" class="bg-in">xxxxx</a></li>

To są zakładki na stronie, chciałabym użyć js żeby zostały wyróżnione po kliknięciu

$('#mybutton1').button('toggle');

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-info" id="mybutton1">
        <input type="radio" name="options"> Opcja 1.
    </label>
    <label class="btn btn-info" id="mybutton2">
        <input type="radio" name="options"> Opcja 2.
    </label>
    <label class="btn btn-info" id="mybutton3">
        <input type="radio" name="options"> Opcja 3.
    </label>
</div>

Czy to nie działa mi dlatego że zakładki mam robione na liście a nie jako buttony?

I jeśli dlatego to jak wyróżnić zakładki po kliknięciu nie zmieniając struktury listy?

2 odpowiedzi

odpowiedź 3 sierpnia 2017 przez Jedras Maniak (54,860 p.)

Prawdopodobnie dlatego, bo:
https://v4-alpha.getbootstrap.com/components/buttons/#methods

Rozwiązanie jest tutaj:
https://v4-alpha.getbootstrap.com/components/navbar/#nav

komentarz 3 sierpnia 2017 przez PaulaPapiku Nowicjusz (200 p.)

Ale w tym rozwiązaniu nie ma jak zrobić żeby po kliknięciu zakładka była aktywna a potem jak się kliknie w następną to następna była. Czyli to tylko na buttonach działa ?

odpowiedź 3 sierpnia 2017 przez rafal.budzis Szeryf (85,700 p.)

Takie rzeczy to bez Bootstrapa sie pisze :P

$('#mybutton1, #mybutton2, #mybutton3').click(function(){
     $(this).toggleClass('active');
});

Ten kod będzie dodawał lub usuwał klase active po kliknięciu

komentarz 3 sierpnia 2017 przez PaulaPapiku Nowicjusz (200 p.)

<ul class="nav navbar-nav">

<li class="active" id="mybutton1"><a href="#" class="bg-po ">vvvvv <span class="sr-only">(current)</span></a></li>

<li class="active" id="mybutton2"><a href="#" class="bg-od">cccc</a></li>

<li class="active" id="mybutton3"><a href="#" class="bg-wo">bbbb / Ścieki</a></li>

<li class="active" id="mybutton4"><a href="#" class="bg-en">aaaa</a></li>

<li class="active" id="mybutton5" ><a href="#" class="bg-in">xxxxx</a></li>

Coś jest nie tak bo mi nie działa, jestem początkująca wiec wybacz ;)

komentarz 3 sierpnia 2017 przez PaulaPapiku Nowicjusz (200 p.)

Czy wstawiam to id w złe miejsce i klasę active ?

komentarz 3 sierpnia 2017 przez PaulaPapiku Nowicjusz (200 p.)

Czy ktoś może mi pomóc ?

komentarz 4 sierpnia 2017 przez sc4rface Dyskutant (7,710 p.)

https://jsfiddle.net/x4ext561/

Pamiętaj o dodaniu do sekcji <head></head> skryptu wczytującego bibliotekę jQuery, np.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

komentarz 4 sierpnia 2017 przez PaulaPapiku Nowicjusz (200 p.)

Dzięki wielkie :) coś mi jednak nie działa a jak wklejam swój kod tam gdzie ty pisałeś to działa, jQuery mam włączone, nie wiem co jeszcze może to blokować.