How do I condense my JQuery functions into one block?

Question

I'm relatively new with JQuery, so I need your help to condense this:

<!--Tabs-->
<script>
$(document).ready(function () {
    $('ul.tabs-style1 li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs-style1 li').removeClass('current');
        $('.tab-content-style1').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })
})
</script>
<script>
$(document).ready(function () {
    $('ul.tabs-style2 li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs-style2 li').removeClass('current');
        $('.tab-content-style2').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })
})
</script>
<script>
$(document).ready(function () {
    $('ul.tabs-style3 li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs-style3 li').removeClass('current');
        $('.tab-content-style3').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })
})
</script>

How would I include all of my styles into one block? Thank you in advance!

EDIT1: My mark up is as follows:

<h4>Style 1</h4>
<ul class="tabs-style1">
<li class="tab-link current" data-tab="tab-1">Tab One</li>
<li class="tab-link" data-tab="tab-2">Tab Two</li>
<li class="tab-link" data-tab="tab-3">Tab Three</li>
<li class="tab-link" data-tab="tab-4">Tab Four</li>
</ul>
<div class="clear"></div>
<div id="tab-1" class="tab-content-style1 current">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="tab-2" class="tab-content-style1">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="tab-3" class="tab-content-style1">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div id="tab-4" class="tab-content-style1">
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<br>
<h4>Style 2</h4>
<ul class="tabs-style2">
<li class="tab-link current" data-tab="tab-5">Tab One</li>
<li class="tab-link" data-tab="tab-6">Tab Two</li>
<li class="tab-link" data-tab="tab-7">Tab Three</li>
<li class="tab-link" data-tab="tab-8">Tab Four</li>
</ul>
<div class="clear"></div>
<div id="tab-5" class="tab-content-style2 current">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="tab-6" class="tab-content-style2">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="tab-7" class="tab-content-style2">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div id="tab-8" class="tab-content-style2">
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
<br>
<h4>Style 3</h4>
<ul class="tabs-style3">
<li class="tab-link current" data-tab="tab-9">Tab One</li>
<li class="tab-link" data-tab="tab-10">Tab Two</li>
<li class="tab-link" data-tab="tab-11">Tab Three</li>
<li class="tab-link" data-tab="tab-12">Tab Four</li>
</ul>
<div class="clear"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="tab-10" class="tab-content-style3">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="tab-11" class="tab-content-style3">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div id="tab-12" class="tab-content-style3">
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

I was thinking something like this might be okay but it doesn't work :S

$(document).ready(function () {
    $('ul.tabs-style1 li, ul.tabs-style2 li, ul.tabs-style3 li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs-style1 li, ul.tabs-style2 li, ul.tabs-style3 li').removeClass('current');
        $('.tab-content-style1, .tab-content-style2, .tab-content-style3').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })
})

Answer 1

You can use Multiple Selector (“selector1, selector2, selectorN”) , and assuming you are storing 1, 2, 3 in data-tab attribute

$(document).ready(function () {
    $('ul.tabs-style1 li, ul.tabs-style2 li, ul.tabs-style3 li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs-style' + tab_id+ ' li').removeClass('current');
        $('.tab-content-style' + tab_id).removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })
})

I would recommend, to use one class for specific purpose like tabs-style instead of tabs-style1, tabs-style2, tabs-style3

Answer 2

It's not pretty with your numbered classes. And this is assuming the data-tab attribute has nothing to do with the style# numbers.

<script>

$('ul.tabs-style1 li, ul.tabs-style2 li, ul.tabs-style3 li').click(function () {

    var tab_id = $(this).data('tab');

    $(this) .removeClass('current')
            .add("#" + tab_id)
            .addClass('current');

    $(this).attr('class').split(' ').forEach(function(cl){
        var re = /tabs-style(\d)/.exec(cl);
        if (re[1]) $('.tab-content-style' + re[1]).removeClass('current');
    });

});

</script>

Answer 3

Everyone appears to want to "fix" your jQuery code... but I believe the answer to the OP's question is pretty simple... the scripts shouldn't be in separate script blocks. Like so...

<!--Tabs-->
<script>
$(document).ready(function () {
    $('ul.tabs-style1 li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs-style1 li').removeClass('current');
        $('.tab-content-style1').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })

    $('ul.tabs-style2 li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs-style2 li').removeClass('current');
        $('.tab-content-style2').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })

    $('ul.tabs-style3 li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs-style3 li').removeClass('current');
        $('.tab-content-style3').removeClass('current');
        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    })
})
</script>

Answer 4

$(document).ready(function () { // this fires when the page is ready, and executes the contained code.
    for(var i = 1; i <= 3; i++){ //this runs 3 times.
        $('ul.tabs-style'+i+' li').click(function () {//This sets the callback
            var tab_id = $(this).attr('data-tab');
            $('ul.tabs-style'+i+' li').removeClass('current');
            $('.tab-content-style'+i).removeClass('current');
            $(this).addClass('current');
            $("#" + tab_id).addClass('current');
        })
    }
})

This is the proper way to condense this code without re-designing it. You can easily add and remove

You can't use a single class name because the class is being used to differentiate groups of tabs.