Jquery Hakkında

onlywhatchess 1514 gün önce

674 defa görüntülendi

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.

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevap yaz

הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cevaplar (1)

tayfunerbilen

1513 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ış
    });
});

#003735