v2.5.2
Giriş yap

Jquery Hakkında

onlywhatchess
599 defa görüntülendi
1

Selamlar,
Şöyle bir kod blogum var, her ne kadar işimi görsede bana pek mantıklıymış gibi gelmiyor. Daha iyi bir yapımı var mı?


$('.item').click(function() {
    $('.item').toggleClass('active');
    $('.sign-in').toggleClass('display-on');
    $('.register').toggleClass('display-on');
});

Yapmaya çalıştığım şey
.item 'Giriş Yap' ve 'Kayıt Ol' butonlarının sınıfı

-- javascript özürlüyümdür.

html javascript jquery
Cevap yaz
Cevaplar (1)
tayfunerbilen
1193 gün önce

bunu aslında tab mantığında genel bir kod olarak yazmak daha doğru olur şöyle bir html kodun olsun;

<div data-tab>
    <nav data-tab-list>
        <ul>
            <li>
                <a href="#">Giriş yap</a>
            </li>
            <li>
                <a href="#">Kayıt ol</a>
            </li>
        </ul>
    </nav>
    <div class="tab-contents">
        <div data-tab-content>1. tab</div>
        <div data-tab-content>2. tab</div>
    </div>
</div>

Ve jquery kodların şöyle olacak;

const tabs = $('[data-tab]');
tabs.each(function(el){
    let tab = $('[data-tab-list] li', el),
        contents = $('[data-tab-content]', el);
    tab.filter(':first').addClass('active');
    contents.filter(':not(:first)').hide();
    tab.on('click', function(e) {
        e.preventDefault();
        tab.removeClass('active').filter(this).addClass('active');
        contents.hide().filter(':eq(' + $(this).index() + ')').fadeIn(300);
        // buradı removeClass().addClass() ile class eklemelide yapabilirsin sana kalmış
    });
});
2
#003735