-1

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

我现在正在尝试使用 twitter bootstrap 和 Jquery。出于某种奇怪的原因，我无法让 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>
4

2 回答 2

1

我相信您正在寻找的是：

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



EDIT

看来您的页面有些放克。如果您先选择另一个选项卡，它将起作用...

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

/* 最终发现 */

在解决了这个问题之后。看来active班级是个问题。从你的第一个 li 中删除它，你就很好了。

于 2013-07-09T21:29:38.463 回答
0

问题是默认情况下选择了第一个选项卡，因此试图告诉它选择该选项卡什么都不做。但是内容没有显示，因为默认情况下它不会显示。您需要将活动类放在 li AND 选项卡上。因此，您可以从一个在选项卡和内容上都处于活动状态的默认选项卡开始：

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

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

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

或者您可以翻转到不同的选项卡，然后返回：

http://jsfiddle.net/r6hJ9/

于 2013-07-09T21:46:56.000 回答