【问题标题】:jQuery UI showing tabs as listjQuery UI 将选项卡显示为列表
【发布时间】:2015-11-24 00:57:12
【问题描述】:

我正在使用 jQuery UI 和 Wordpress 来显示选项卡式表单。 jQuery 似乎正确地添加了选项卡标记。

<div id="tabs">
      <ul>
        <li><a href="/community_users_form/profile_edit/<?php echo $cid.'/'.$userid?>">Profile</a></li>
        <li><a href="#tabs-2">Communities</a></li>
        <li><a href="/community_users_form/roles_edit/<?php echo $cid.'/'.$userid?>">Roles</a></li>
        <li><a href="#tabs-4">Admin</a></li>
        <li><a href="#tabs-5">Delegation</a></li>
        <li><a href="#tabs-6">Payments</a></li>
        <li><a href="#tabs-7">Email</a></li>
        <li><a href="#tabs-8">Activity</a></li>
      </ul>

变化

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
      <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
        <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="ui-id-2" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true"><a href="/community_users_form/profile_edit/2568/" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Profile</a></li>
        <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-2" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false"><a href="#tabs-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">Communities</a></li>
        <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="ui-id-5" aria-labelledby="ui-id-4" aria-selected="false" aria-expanded="false"><a href="/community_users_form/roles_edit/2568/" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-4">Roles</a></li>
        <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-4" aria-labelledby="ui-id-6" aria-selected="false" aria-expanded="false"><a href="#tabs-4" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-6">Admin</a></li>
        <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-5" aria-labelledby="ui-id-7" aria-selected="false" aria-expanded="false"><a href="#tabs-5" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-7">Delegation</a></li>
        <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-6" aria-labelledby="ui-id-8" aria-selected="false" aria-expanded="false"><a href="#tabs-6" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-8">Payments</a></li>
        <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-7" aria-labelledby="ui-id-9" aria-selected="false" aria-expanded="false"><a href="#tabs-7" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-9">Email</a></li>
        <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-8" aria-labelledby="ui-id-10" aria-selected="false" aria-expanded="false"><a href="#tabs-8" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-10">Activity</a></li>
      </ul>

选项卡显示为普通列表,而不是选项卡。

【问题讨论】:

  • 我认为你错过了 js 或 css

标签: wordpress jquery-ui tabs


【解决方案1】:

fiddle link

             <div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
                      <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
                        <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="ui-id-2" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true"><a href="/community_users_form/profile_edit/2568/" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Profile</a></li>
                        <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-2" aria-labelledby="ui-id-3" aria-selected="false" aria-expanded="false"><a href="#tabs-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">Communities</a></li>
                        <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="ui-id-5" aria-labelledby="ui-id-4" aria-selected="false" aria-expanded="false"><a href="/community_users_form/roles_edit/2568/" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-4">Roles</a></li>
                        <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-4" aria-labelledby="ui-id-6" aria-selected="false" aria-expanded="false"><a href="#tabs-4" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-6">Admin</a></li>
                        <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-5" aria-labelledby="ui-id-7" aria-selected="false" aria-expanded="false"><a href="#tabs-5" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-7">Delegation</a></li>
                        <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-6" aria-labelledby="ui-id-8" aria-selected="false" aria-expanded="false"><a href="#tabs-6" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-8">Payments</a></li>
                        <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-7" aria-labelledby="ui-id-9" aria-selected="false" aria-expanded="false"><a href="#tabs-7" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-9">Email</a></li>
                        <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tabs-8" aria-labelledby="ui-id-10" aria-selected="false" aria-expanded="false"><a href="#tabs-8" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-10">Activity</a></li>
                      </ul>

                <script>
                      $(function() {
                        $( "#tabs" ).tabs();
                      });
                </script>

【讨论】:

    【解决方案2】:

    发现问题。我包括 jquery-ui.theme.css 而不是 jquery-ui.css

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-01-07
      • 2013-07-07
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多