Select a specific Tab in Materilize css using Jquery

I am using materlize css version 1.0 with jquery.

I want to select a Tab through jquery and I am doing the below

 $(".tabs").tabs("select", "#tabId");

But this does not seem to be working.

I see the below syntax in the official site.

 $('.tabs').tabs('methodName', paramName);

edited Nov 20 '18 at 5:01

Saurabh Mistry

3,7121826

asked Nov 20 '18 at 4:24

Roshan

458

So, did you use that?

– Just code
Nov 20 '18 at 5:03

1

Try this without # $(".tabs").tabs("select", "tabId"); may be it can help you

– Shubham Baranwal
Nov 20 '18 at 5:08

add a comment |

I am using materlize css version 1.0 with jquery.

I want to select a Tab through jquery and I am doing the below

 $(".tabs").tabs("select", "#tabId");

But this does not seem to be working.

I see the below syntax in the official site.

 $('.tabs').tabs('methodName', paramName);

edited Nov 20 '18 at 5:01

Saurabh Mistry

3,7121826

asked Nov 20 '18 at 4:24

Roshan

458

So, did you use that?

– Just code
Nov 20 '18 at 5:03

1

Try this without # $(".tabs").tabs("select", "tabId"); may be it can help you

– Shubham Baranwal
Nov 20 '18 at 5:08

add a comment |

I am using materlize css version 1.0 with jquery.

I want to select a Tab through jquery and I am doing the below

 $(".tabs").tabs("select", "#tabId");

But this does not seem to be working.

I see the below syntax in the official site.

 $('.tabs').tabs('methodName', paramName);

edited Nov 20 '18 at 5:01

Saurabh Mistry

3,7121826

asked Nov 20 '18 at 4:24

Roshan

458

I am using materlize css version 1.0 with jquery.

I want to select a Tab through jquery and I am doing the below

 $(".tabs").tabs("select", "#tabId");

But this does not seem to be working.

I see the below syntax in the official site.

 $('.tabs').tabs('methodName', paramName);

jquery materialize

edited Nov 20 '18 at 5:01

Saurabh Mistry

3,7121826

asked Nov 20 '18 at 4:24

Roshan

458

edited Nov 20 '18 at 5:01

Saurabh Mistry

3,7121826

asked Nov 20 '18 at 4:24

Roshan

458

edited Nov 20 '18 at 5:01

Saurabh Mistry

3,7121826

edited Nov 20 '18 at 5:01

Saurabh Mistry

3,7121826

edited Nov 20 '18 at 5:01

Saurabh Mistry

3,7121826

asked Nov 20 '18 at 4:24

Roshan

458

asked Nov 20 '18 at 4:24

Roshan

458

asked Nov 20 '18 at 4:24

Roshan

458

So, did you use that?

– Just code
Nov 20 '18 at 5:03

1

Try this without # $(".tabs").tabs("select", "tabId"); may be it can help you

– Shubham Baranwal
Nov 20 '18 at 5:08

add a comment |

So, did you use that?

– Just code
Nov 20 '18 at 5:03

1

Try this without # $(".tabs").tabs("select", "tabId"); may be it can help you

– Shubham Baranwal
Nov 20 '18 at 5:08

So, did you use that?

– Just code
Nov 20 '18 at 5:03

Try this without # $(".tabs").tabs("select", "tabId"); may be it can help you

– Shubham Baranwal
Nov 20 '18 at 5:08

add a comment |

1 Answer
1

active

oldest

votes

Here is working demo :

$(document).ready(function(){

     // initialize tab

    $('.tabs').tabs();

    

    // select tab 2 on document load

    $('.tabs').tabs('select','test2');

  });

        

       

$(document).on('click','.btn',function(){

   var tab=$(this).attr('data-tab');

   $('.tabs').tabs('select','test'+tab);

});

 <!-- Compiled and minified CSS -->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">



    <!-- Compiled and minified JavaScript -->

    <script

  src="https://code.jquery.com/jquery-3.3.1.min.js"

  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="

  crossorigin="anonymous"></script>

  

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

            



 <div class="row">

    <div class="col s12">

      <ul class="tabs">

        <li class="tab col s3"><a href="#test1">Test 1</a></li>

        <li class="tab col s3"><a href="#test2">Test 2</a></li>

      </ul>

    </div>

    <div id="test1" class="col s12">Test 1</div>

    <div id="test2" class="col s12">Test 2</div>

  </div>

  

 <button class="waves-effect waves-light btn" data-tab="1">tab 1 </button>

 <button class="waves-effect waves-light btn" data-tab="2">tab 2</button>

answered Nov 20 '18 at 5:10

Saurabh Mistry

3,7121826

@Roshan , please upvote answer

– Saurabh Mistry
Nov 20 '18 at 6:07

I was trying your code. seeing the below error.$(...).tabs is not a function

– Roshan
Nov 20 '18 at 6:09

add jquery and then materialize.min.js and then put custom code in<script> tag

– Saurabh Mistry
Nov 20 '18 at 6:11

sorry. It works fine.

– Roshan
Nov 20 '18 at 6:11

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53386198%2fselect-a-specific-tab-in-materilize-css-using-jquery%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Here is working demo :

$(document).ready(function(){

     // initialize tab

    $('.tabs').tabs();

    

    // select tab 2 on document load

    $('.tabs').tabs('select','test2');

  });

        

       

$(document).on('click','.btn',function(){

   var tab=$(this).attr('data-tab');

   $('.tabs').tabs('select','test'+tab);

});

 <!-- Compiled and minified CSS -->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">



    <!-- Compiled and minified JavaScript -->

    <script

  src="https://code.jquery.com/jquery-3.3.1.min.js"

  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="

  crossorigin="anonymous"></script>

  

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

            



 <div class="row">

    <div class="col s12">

      <ul class="tabs">

        <li class="tab col s3"><a href="#test1">Test 1</a></li>

        <li class="tab col s3"><a href="#test2">Test 2</a></li>

      </ul>

    </div>

    <div id="test1" class="col s12">Test 1</div>

    <div id="test2" class="col s12">Test 2</div>

  </div>

  

 <button class="waves-effect waves-light btn" data-tab="1">tab 1 </button>

 <button class="waves-effect waves-light btn" data-tab="2">tab 2</button>

answered Nov 20 '18 at 5:10

Saurabh Mistry

3,7121826

@Roshan , please upvote answer

– Saurabh Mistry
Nov 20 '18 at 6:07

I was trying your code. seeing the below error.$(...).tabs is not a function

– Roshan
Nov 20 '18 at 6:09

add jquery and then materialize.min.js and then put custom code in<script> tag

– Saurabh Mistry
Nov 20 '18 at 6:11

sorry. It works fine.

– Roshan
Nov 20 '18 at 6:11

add a comment |

Here is working demo :

$(document).ready(function(){

     // initialize tab

    $('.tabs').tabs();

    

    // select tab 2 on document load

    $('.tabs').tabs('select','test2');

  });

        

       

$(document).on('click','.btn',function(){

   var tab=$(this).attr('data-tab');

   $('.tabs').tabs('select','test'+tab);

});

 <!-- Compiled and minified CSS -->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">



    <!-- Compiled and minified JavaScript -->

    <script

  src="https://code.jquery.com/jquery-3.3.1.min.js"

  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="

  crossorigin="anonymous"></script>

  

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

            



 <div class="row">

    <div class="col s12">

      <ul class="tabs">

        <li class="tab col s3"><a href="#test1">Test 1</a></li>

        <li class="tab col s3"><a href="#test2">Test 2</a></li>

      </ul>

    </div>

    <div id="test1" class="col s12">Test 1</div>

    <div id="test2" class="col s12">Test 2</div>

  </div>

  

 <button class="waves-effect waves-light btn" data-tab="1">tab 1 </button>

 <button class="waves-effect waves-light btn" data-tab="2">tab 2</button>

answered Nov 20 '18 at 5:10

Saurabh Mistry

3,7121826

@Roshan , please upvote answer

– Saurabh Mistry
Nov 20 '18 at 6:07

I was trying your code. seeing the below error.$(...).tabs is not a function

– Roshan
Nov 20 '18 at 6:09

add jquery and then materialize.min.js and then put custom code in<script> tag

– Saurabh Mistry
Nov 20 '18 at 6:11

sorry. It works fine.

– Roshan
Nov 20 '18 at 6:11

add a comment |

Here is working demo :

$(document).ready(function(){

     // initialize tab

    $('.tabs').tabs();

    

    // select tab 2 on document load

    $('.tabs').tabs('select','test2');

  });

        

       

$(document).on('click','.btn',function(){

   var tab=$(this).attr('data-tab');

   $('.tabs').tabs('select','test'+tab);

});

 <!-- Compiled and minified CSS -->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">



    <!-- Compiled and minified JavaScript -->

    <script

  src="https://code.jquery.com/jquery-3.3.1.min.js"

  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="

  crossorigin="anonymous"></script>

  

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

            



 <div class="row">

    <div class="col s12">

      <ul class="tabs">

        <li class="tab col s3"><a href="#test1">Test 1</a></li>

        <li class="tab col s3"><a href="#test2">Test 2</a></li>

      </ul>

    </div>

    <div id="test1" class="col s12">Test 1</div>

    <div id="test2" class="col s12">Test 2</div>

  </div>

  

 <button class="waves-effect waves-light btn" data-tab="1">tab 1 </button>

 <button class="waves-effect waves-light btn" data-tab="2">tab 2</button>

answered Nov 20 '18 at 5:10

Saurabh Mistry

3,7121826

Here is working demo :

$(document).ready(function(){

     // initialize tab

    $('.tabs').tabs();

    

    // select tab 2 on document load

    $('.tabs').tabs('select','test2');

  });

        

       

$(document).on('click','.btn',function(){

   var tab=$(this).attr('data-tab');

   $('.tabs').tabs('select','test'+tab);

});

 <!-- Compiled and minified CSS -->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">



    <!-- Compiled and minified JavaScript -->

    <script

  src="https://code.jquery.com/jquery-3.3.1.min.js"

  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="

  crossorigin="anonymous"></script>

  

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

            



 <div class="row">

    <div class="col s12">

      <ul class="tabs">

        <li class="tab col s3"><a href="#test1">Test 1</a></li>

        <li class="tab col s3"><a href="#test2">Test 2</a></li>

      </ul>

    </div>

    <div id="test1" class="col s12">Test 1</div>

    <div id="test2" class="col s12">Test 2</div>

  </div>

  

 <button class="waves-effect waves-light btn" data-tab="1">tab 1 </button>

 <button class="waves-effect waves-light btn" data-tab="2">tab 2</button>

$(document).ready(function(){

     // initialize tab

    $('.tabs').tabs();

    

    // select tab 2 on document load

    $('.tabs').tabs('select','test2');

  });

        

       

$(document).on('click','.btn',function(){

   var tab=$(this).attr('data-tab');

   $('.tabs').tabs('select','test'+tab);

});

 <!-- Compiled and minified CSS -->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">



    <!-- Compiled and minified JavaScript -->

    <script

  src="https://code.jquery.com/jquery-3.3.1.min.js"

  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="

  crossorigin="anonymous"></script>

  

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

            



 <div class="row">

    <div class="col s12">

      <ul class="tabs">

        <li class="tab col s3"><a href="#test1">Test 1</a></li>

        <li class="tab col s3"><a href="#test2">Test 2</a></li>

      </ul>

    </div>

    <div id="test1" class="col s12">Test 1</div>

    <div id="test2" class="col s12">Test 2</div>

  </div>

  

 <button class="waves-effect waves-light btn" data-tab="1">tab 1 </button>

 <button class="waves-effect waves-light btn" data-tab="2">tab 2</button>

$(document).ready(function(){

     // initialize tab

    $('.tabs').tabs();

    

    // select tab 2 on document load

    $('.tabs').tabs('select','test2');

  });

        

       

$(document).on('click','.btn',function(){

   var tab=$(this).attr('data-tab');

   $('.tabs').tabs('select','test'+tab);

});

 <!-- Compiled and minified CSS -->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">



    <!-- Compiled and minified JavaScript -->

    <script

  src="https://code.jquery.com/jquery-3.3.1.min.js"

  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="

  crossorigin="anonymous"></script>

  

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

            



 <div class="row">

    <div class="col s12">

      <ul class="tabs">

        <li class="tab col s3"><a href="#test1">Test 1</a></li>

        <li class="tab col s3"><a href="#test2">Test 2</a></li>

      </ul>

    </div>

    <div id="test1" class="col s12">Test 1</div>

    <div id="test2" class="col s12">Test 2</div>

  </div>

  

 <button class="waves-effect waves-light btn" data-tab="1">tab 1 </button>

 <button class="waves-effect waves-light btn" data-tab="2">tab 2</button>

answered Nov 20 '18 at 5:10

Saurabh Mistry

3,7121826

answered Nov 20 '18 at 5:10

Saurabh Mistry

3,7121826

answered Nov 20 '18 at 5:10

Saurabh Mistry

3,7121826

answered Nov 20 '18 at 5:10

Saurabh Mistry

3,7121826

@Roshan , please upvote answer

– Saurabh Mistry
Nov 20 '18 at 6:07

I was trying your code. seeing the below error.$(...).tabs is not a function

– Roshan
Nov 20 '18 at 6:09

add jquery and then materialize.min.js and then put custom code in<script> tag

– Saurabh Mistry
Nov 20 '18 at 6:11

sorry. It works fine.

– Roshan
Nov 20 '18 at 6:11

add a comment |

@Roshan , please upvote answer

– Saurabh Mistry
Nov 20 '18 at 6:07

I was trying your code. seeing the below error.$(...).tabs is not a function

– Roshan
Nov 20 '18 at 6:09

add jquery and then materialize.min.js and then put custom code in<script> tag

– Saurabh Mistry
Nov 20 '18 at 6:11

sorry. It works fine.

– Roshan
Nov 20 '18 at 6:11

@Roshan , please upvote answer

– Saurabh Mistry
Nov 20 '18 at 6:07

I was trying your code. seeing the below error.$(...).tabs is not a function

– Roshan
Nov 20 '18 at 6:09

add jquery and then materialize.min.js and then put custom code in<script> tag

– Saurabh Mistry
Nov 20 '18 at 6:11

sorry. It works fine.

– Roshan
Nov 20 '18 at 6:11

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk