Question

首先，我是潜伏了很长时间的新成员。通过我的实验进行简单的搜索通常可以回答我的问题。

我正在尝试使用twitter bootstrap和Jquery。由于一些奇怪的原因，我无法在我的websever上呈现javascript。它是一个安装了nginx的干净服务器。

要测试，它是一个加载选项卡1的简单脚本。只是不起作用。

我做错了什么？

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>

    <div class="container">
    <div class="row-fluid">
    <ul class="nav nav-tabs" id="tabs">

        <li class="active span4 text-center"><a href="#tab1" data-toggle="tab">Protecting your data </a></li>

        <li class="span4 text-center"><a href="#tab2" data-toggle="tab">Built-in Compliance </a></li>

        <li class="span4 text-center"><a href="#tab3" data-toggle="tab">Easy IT Administration </a></li>

    </ul>
    </div>

    <div class="tab-content">
        <div id="tab1" class="tab-pane">
            <p>Protecting your data</p>
        </div>
        <div id="tab2" class="tab-pane">
            <p>Built-in Compliance</p>
        </div>
        <div id="tab3" class="tab-pane">
            <p>This is tab 3</p>
        </div>
    </div>

    </div>

<!-- script to display first tab by default -->


<script>
    $(function () {
    $('#tabs a:first').tab('show');
    })
</script>


</body>
</html>

Answer 1

我相信你所寻找的是：

NOtworking =>>>> $('#tabs a').first().tab('show');



EDIT

看来你的网页有一些恐惧。如果您先选择另一个选项卡，它将起作用...

$('#tabs a').tab('show').first().tab('show')

/ *最终发现的问题* /

解决问题后。似乎active类是问题所在。从你的第一个李中删除它，你很好。

Answer 2

问题是默认选择了第一个选项卡，因此尝试告诉它选择该选项卡什么都不做。但内容未显示，因为默认情况下不会显示。您需要将活动类放在li和选项卡上。因此，您可以从标签和内容上的“默认”选项卡开始激活：

<li class="active span4 text-center active">

<div id="tab1" class="tab-pane active">

http://jsfiddle.net/s4d8x/1/

或者您可以翻到另一个标签，然后返回：

http://jsfiddle.net/r6hJ9/

Javascript不会在网络服务器上呈现

2 个答案: