0

I have written some horrible jQuery code (as I am new to JS). I have four buttons, when i click one it will add the active class which changes the background colour on the tab i have just clicked. It works but I know there is a better way to do it, my code is like 30 lines long and i know using the 'this' feature it can be done in like 4. Could someone show me how please:

$(document).ready(function () {
    $('#privacyTitle').click(function(e) {

        $('#SecurityTitle').removeClass('active');
        $('#wisemanTitle').removeClass('active');
        $('#manualTitle').removeClass('active');
        $('#privacyTitle').addClass('active');
        e.preventDefault();
    });
});

$(document).ready(function () {
    $('#SecurityTitle').click(function(e) {

        $('#privacyTitle').removeClass('active');
        $('#wisemanTitle').removeClass('active');
        $('#manualTitle').removeClass('active');
        $('#SecurityTitle').addClass('active');
        e.preventDefault();
    });
});
$(document).ready(function () {
    $('#wisemanTitle').click(function(e) {

        $('#privacyTitle').removeClass('active');
        $('#SecurityTitle').removeClass('active');
        $('#manualTitle').removeClass('active');
        $('#wisemanTitle').addClass('active');
        e.preventDefault();
    });
});
$(document).ready(function () {
    $('#manualTitle').click(function(e) {

        $('#privacyTitle').removeClass('active');
        $('#wisemanTitle').removeClass('active');
        $('#SecurityTitle').removeClass('active');
        $('#manualTitle').addClass('active');
        e.preventDefault();
    });
});

<div class="row" id="content">
   <div class="tab">
      <button id="privacyTitle" class="tablinks">Privacy by Design</button><button class="tablinks" id="SecurityTitle">Security Design Assurance</button><button class="tablinks" id="wisemanTitle">Wiseman</button>
      <button class="tablinks" id="manualTitle">Manual Risk Assessment</button>
   </div>
</div>

2 Answers 2

0

You can use jQuery Class selector for your case. Something like below can help, (it's not tested)

$(document).ready(function () {
    $('#privacyTitle').click(function(e) {
        $(".tablinks").removeClass('active');
        $('#privacyTitle').addClass('active');
        e.preventDefault();
    });

    $('#SecurityTitle').click(function(e) {
        $(".tablinks").removeClass('active');
        $('#SecurityTitle').addClass('active');
        e.preventDefault();
    });

    $('#wisemanTitle').click(function(e) {
        $(".tablinks").removeClass('active');
        $('#wisemanTitle').addClass('active');
        e.preventDefault();
    });

    $('#manualTitle').click(function(e) {
        $(".tablinks").removeClass('active');
        $('#manualTitle').addClass('active');
        e.preventDefault();
    });
});
0

Try this concept and modify to meet your setup, I've used vanilla but you could transform to jQuery if you really need

document.querySelector('.tab').addEventListener('click', (e) => {
    //remove other tabs
    tabs = document.querySelectorAll('.tablinks')
    if(tabs !== null){
      tabs.forEach(function(tab){
        tab.classList.remove('active');
      })
    }

    // add active to clicked
    var tab = e.target;
    tab.classList.add('active');
})

jsbin

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.