0

I have a tab system in my view folder and i need to load a specific tab when the page loads.

I know this exact question has been asked here Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink

but everything i've tried hasn't worked. Ultamitly i want to load a tab depending on what link is pressed but right now i am just trying to load a specific tab off the start.

in my view file I have

<head>
    <script>


    $('#myTab a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    })

    $('#myTab a[href="#email-skills"]').tab('show');        
    </script>
</head>

and my tab system looks like this

<ul class="nav nav-tabs nav-stacked" style = "margin-top: 10px" id="myTab">
                <li class = ""><a href="#basic-computer-skills" data-toggle="tab">Basic Computer Skills</a></li>
                <li><a href="#advanced-computer-skills" data-toggle="tab">Advanced Computer Skills</a></li>
                <li><a href="#multi-media-skills" data-toggle="tab">Multi-Media Skills</a></li>
                <li><a href="#word-processing-skills" data-toggle="tab">Word Processing Skills</a></li>
                <li><a href="#spreadsheet-skills" data-toggle="tab">Spreadsheet Skills</a></li>
                <li><a href="#presentation-skills" data-toggle="tab">Presentation Skills</a></li>
                <li><a href="#email-skills" data-toggle="tab">Email Skills</a></li>
                <li><a href="#internet-skills" data-toggle="tab">Internet/Network Skills</a></li>
                <li><a href="#social-media-skills" data-toggle="tab">Social Media Skills</a></li>
                <li><a href="#online-skills" data-toggle="tab">Online Collaboration</a></li>
</ul>

I know there are lots of posts on how to do this and bootstrap has their own javascript on their site but nothing has worked. Does anyone know what i could be doing wrong? Also, my tabs work when i click on them so i don't think its a syntax error. Just all my attempts to make it load a specific tab has failed. I know about class = "active" but that doesn't help me for my end goal.

I am also using the gems

gem 'twitter-bootstrap-rails'
gem 'bootstrap-will_paginate', '0.0.9'
gem 'bootstrap-sass', '3'

1 Answer 1

1

You can use this function:

$(function () {

       $('ul.nav a.classtobeloaded').tab('show')


 })

Your Answer

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

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