Question

问题：我正在第三方CMS /模板系统中创建自定义网页。我正在尝试使用选项卡式导航创建一个页面 - 每个选项卡上只有3个选项卡，其中包含内容。标签按预期工作，但即使我可以在代码中看到它，每个标签上也没有显示任何内容。

HTML ：

    <div class="tabbable" id="amenities"><!-- Only required for left/right tabs -->
    <ul class="nav nav-tabs" data-tabs="tabs" id="amenitiesTab">
        <li class="active"><a data-toggle="tab" href="#tab-community">Community
                Amenities</a></li>
        <li><a data-toggle="tab" href="#tab-apartment">Apartment
                Amenities</a></li>
        <li><a data-toggle="tab" href="#tab-petpolicy">Pet Policy</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active fade row-fluid" id="tab-community">
            <div class="span6">
                <h1>Amenities</h1>
                <p>text goes here</p>
                <table class="table table-striped table-condensed">
                    <tbody>
                        <tr>
                            <td>some text goes here</td>
                            <td>some text goes here</td>
                        </tr>
                    </tbody>
                </table>
            </div><!--close .span6-->
            <div class="span6">&nbsp;</div>
        </div><!--close #tab-community-->
        <div class="tab-pane fade row-fluid" id="tab-apartment">
            <div class="span6">
                <h1>Features</h1>
                <p>some text here</p>
                <table class="table table-striped table-condensed">
                    <tbody>
                        <tr>
                            <td>some text goes here</td>
                            <td>some text goes here</td>
                        </tr>
                    </tbody>
                </table>
            </div><!--close .span6-->
            <div class="span6">&nbsp;</div>
                    </div><!--close tab-apartment-->
        </div><!--close .tab-content-->
    </div><!--close .tabbable-->
</div>

CSS：

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://cdn.rentcafe.com/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.rentcafe.com/css/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.rentcafe.com/css/jquery-ui-bootstrap/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.rentcafe.com/css/table-responsive.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.rentcafe.com/css/functional.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.rentcafe.com/Themes/Sicily2/css/Sicily2_inner.css" />

JS ：

<script src="http://cdn.rentcafe.com/js/jquery.min.js" type="text/javascript"></script>
<script src="http://cdn.rentcafe.com/js/bootstrap.min.js" type="text/javascript"></script>
<script src="http://cdn.rentcafe.com/js/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://cdn.rentcafe.com/js/cafe.utilities.min.js" type="text/javascript"></script>
<base href="www.rentcafe.com"><!--[if lte IE 6]></base><![endif]--><script src="/js/cafe.respond.min.js" type="text/javascript"></script>
<link href="http://cdn.rentcafe.com/js/xDomainRespond/cafe-respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
<link href="/js/xDomainRespond/cafe.respond.proxy.gif"id="respond-redirect" rel="respond-redirect" />
<script src="/js/xDomainRespond/cafe.respond.proxy.min.js" type="text/javascript"></script>
<script src="https://t.rentcafe.com/t.js" type="text/javascript"></script>
<script src="http://cdn.rentcafe.com/js/modernizr.min.js" type="text/javascript"></script>
<script src="http://cdn.rentcafe.com/js/offcanvas_menu.min.js" type="text/javascript"></script>
<script src="http://cdn.rentcafe.com/js/jquery.easytabs.min.js" type="text/javascript"></script>

研究：这些脚本都不起作用。我已经逐一尝试了它们，而不是全部在一起，如下所示...只需将URL和脚本放在一起以供参考。（如果我在代码中犯了一个愚蠢的错误，我道歉。）

参考：http://bootstrapdocs.com/v2.3.1/docs/javascript.html#tabs

$(document).ready(function() { 
  $("#amenitiesTab a:first").tab("show"); // Select first tab
});

$('#.tabs').bind('change', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
});

参考：http://bootstrapdocs.com/v2.3.1/docs/javascript.html#tabs
Twitter Bootstrap tabs not working for me

$(document).ready(function() { 
$('#amenitiesTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});   
});

参考：Twitter Bootstrap Tab Selection Not Changing Content

$(function(){   
$('.nav-tabs a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
});    
});

参考：http://twitter-bootstrap.node1.zygote.cc/javascript.html

$(function () {
$('.tabs').tabs()
});

$('#.tabs').bind('change', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
});

参考（Easytabs.js）：http://www.jqueryrain.com/?gZPxXp6z

Bootstrap v2.3.1导航标签不显示内容

0 个答案: