加载特定的引导选项卡

时间:2014-06-12 22:40:48

标签: javascript css ruby-on-rails twitter-bootstrap tabs

我的视图文件夹中有一个标签系统,我需要在页面加载时加载特定标签。

我知道这个问题已在Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink

中提出

但我尝试过的一切都没有奏效。 Ultamitly我想根据按下的链接加载一个标签但是现在我只是想从一开始就加载一个特定的标签。

在我的视图文件中

<head>
    <script>


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

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

我的标签系统看起来像这样

<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>

我知道有很多帖子关于如何做到这一点,bootstrap在他们的网站上有自己的javascript但没有任何效果。有谁知道我可能做错了什么? 此外,当我点击它们时我的标签工作,所以我不认为它的语法错误。我尝试加载特定选项卡的所有尝试都失败了。我知道class =“active”但这对我的最终目标没有帮助。

我也在使用宝石

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

1 个答案:

答案 0 :(得分:1)

您可以使用此功能:

$(function () {

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


 })