css - 在我的 Rails 4 应用程序中设置 JQuery UI 选项卡样式时遇到问题

Question

我正在使用带有 JQuery-UI 插件的 Rails 4.2.3。我有 JQuery 选项卡，设置如下

<div id="tabs">
<ul class="nav">
  <li><%= link_to 'My Objects’, root_path %></li>
  <li><%= link_to 'Lookup Results', search_times_objects_path %></li>
  <%= render 'layouts/navigation_links' %>
</ul>
</div>

而且我想为选定的选项卡设置与未选定的选项卡不同的样式，所以我将其添加到我的样式表中......

ul.nav {
    font-family: 'russo_oneregular';
}
ul.tabs li.ui-state-active,ul.tabs li.ui-tabs-selected { 
    font-weight: bold; 
    font-color: #000000;
}
ul.tabs li.ui-tabs-active a, ul.tabs li.ui-tabs-selected a {
    font-color: #ffffff;
}

虽然加载了样式表，但没有任何选项卡被设置样式，即使它们被选中/未被选中。我需要调整什么才能使样式正确？

编辑:为了深入了解包含的内容，这是在我的 app/assets/javascripts/application.js 文件中...

    //= require jquery
    //= require jquery-ui
    //= require jquery_ujs
    //= require jquery.modal
    //= require turbolinks
    //= require_tree .

呈现为

        <script src="/assets/jquery.self-660adc51e0224b731d29f575a6f1ec167ba08ad06ed5deca4f1e8654c135bf4c.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/core.self-93be4d22eda916787802a64d8f88b52db8a9027d4ccbbc0942625324a7d12d44.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/widget.self-c1602241ddc51216b58391768667068867b8e15b9efc722befcd25771eda6819.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/accordion.self-c95f320275150a94241b004a91e21eef9c5ae9965a793cb3e2475f6078a1670d.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/position.self-e693ced4ecfa1a276f0b794f32c1d30d792764b08788bf68ecfa3b388c291333.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/menu.self-7abc1c9401509a7e4fc609b1e461be6fd17e8116e8fda19cc59d05ba79aefb68.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/autocomplete.self-3befc48aba87cead090cfd014562b2771a662ac6d2c8197b24c08b2d9f3d9f2d.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/button.self-4d4f21ba77bbf8cc08ae65e2b6329a7a1b952b32c3ba7bffca8313e7e8c93d0c.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/datepicker.self-6267be6d4d0f0e8665be3b4d6ac07f40ba23a32aff8eaa5d1bfc00f76a9eeae7.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/mouse.self-c513294e8da73f31f84ba3ef11e2a1180a47faea0eb2fea4a53fc26153dd21fd.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/draggable.self-debcca3d0d5d9afe2fe91a6fd1aebdb41ca0a55f2f6017352e6c02b6d8a6e64c.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/resizable.self-60b870565f3cd62982c1907828119bb51f42ec8228d5e23868153edc3abc685c.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/dialog.self-5a6c7980dfa3f6b74445b0f4b20eed799ee65363163500ed7f032e603d6b022d.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/droppable.self-a7a2b4c2cec8fc176f51e4e4291d92bfd3eec40b6a580b47fc54c16334d52882.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect.self-3acdb29e7da09c8f0195b994d2f04d73bfef50dc539c84fd2c835d964d33e5c1.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-blind.self-ed102209d7aa0b7374f3db8478cc7dcff5f9980d3146e8bf9fbfab959c6d5d8a.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-bounce.self-bfcb9288797ecd234ddeedf4fbc5b4c9de94a4e6d8d44e6faa5b5e9836fad9fd.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-clip.self-7368e4597c32360b162d264ff8bbd0cf9fb1535eb9b4564e6eb7c1db3c774bf3.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-drop.self-294aaa72126ad9c94d6558cca792eb3716754713aca98f18a9dd7c493150ed92.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-explode.self-68e74dc114a52f3f4d7033e40c39196961bdcf439652daa2e98baa115c7bb44b.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-fade.self-42d542a5253e0a610717460102ee6bee339c656cc188e491d89eb0779043c963.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-fold.self-ad9967f153423916300dbf1104b00f7ad7bbd6a222a0fcc1012ebe251bcb13c8.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-highlight.self-f922b7179ab8ccfa7865141f38865bba0a3d2bdceba7561c27ca14544dbfd996.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-size.self-368aecefa09656a2be5c72dc8e685b120363a3df812134cbd2dd998bafa179fd.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-scale.self-884a5abcb6d90fcd9f9a071aa8329638184df688afced1b1d3b6be6c69f4dd7f.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-puff.self-93415831093923a70f671d73e8d0b3d94deb37ac7472a036a4add545f565c166.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-pulsate.self-eb107c0d136eccdfbd8a2f0f2ee71e0f6911cb300c6b63cc2fe4f6532e6a9a97.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-shake.self-63bcc14897aac5b84e10690be94d64d5724f864aa14c913b4d1030c461a256ad.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-slide.self-c93054a4a80d1f986760806d81ab067e4a4120bf103337e152ecc24d36e785f6.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/effect-transfer.self-181245634ec522320fc1081f6dbf94fd982f34eefa03555f76817dedfcdea336.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/progressbar.self-a259ff5a2a5e7aef0ec21bda94edd0f6bc1e9821128d901de415956edf212b0d.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/selectable.self-42e53fc2f95211314e36a8094c42560f869c207f16d68cfc206aa37201dcdc03.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/selectmenu.self-09dbcac573f0e508194bd9deff254db090889b380d030261857860309c0918e8.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/slider.self-8af8d2a0661743ba88b4cfb99d5c8c874cfa3fc6528ae4e9252366b388def0b7.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/sortable.self-df2d80a36f9dfbe0facc596ccd92af83ca50d38e4cd6a84810aaf5d40b8cd181.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/spinner.self-3c8c95a7bc9c877d0f9c16789246bbedda6b8e8fbf5927951babdab775aed02e.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/tabs.self-dc07b44bf1b926c8d28ccd2658e30933881e5329348caf70cf305c3943f6bbd7.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui/tooltip.self-38f04ac3a6c8fb2391ec6832b68845671cc9013a94371b7eb239478f4835eb73.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery-ui.self-52111578aa54225c9ebfe06f78a62771020ee548bb27d62228ee3f5e6633969d.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery_ujs.self-e87806d0cf4489aeb1bb7288016024e8de67fd18db693fe026fe3907581e53cd.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/jquery.modal.self-c79a0f0d30a0d56ed5ef3e848fb327eaf0347b19edc3e32a4ed01ab7981e124c.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/turbolinks.self-c37727e9bd6b2735da5c311aa83fead54ed0be6cc8bd9a65309e9c5abe2cbfff.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/my_objects.self-b0b6ec46f1eff3cf4f5a976553214f42f58a748ce51e756f9f238e136d41e30a.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/user_my_object_time_matches.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
    <script src="/assets/application.self-abf55f804796de5da127bcfc5fb78b0494e1e0968b014300c8b6ae359f4a19ad.js?body=1" data-turbolinks-track="true"></script>
        <meta name="csrf-param" content="authenticity_token" />

Answer 1

问题是从这个 ul.tabs li.ui-tabs-active a, ul.tabs li.ui-tabs-selected a看来你在找ul.tabs或 <ul class="tabs"></ul>但是你有<ul class="nav">

尝试

ul.nav li.ui-state-active,ul.nav li.ui-tabs-selected { 
    font-weight: bold; 
    font-color: #000000;
}
ul.nav li.ui-tabs-active a, ul.nav li.ui-tabs-selected a {
    font-color: #ffffff;
}

此外，确保选项卡已初始化:

$(function() {
  $( "#tabs" ).tabs();
});