Question

所以我正在尝试开发一个包含一些嵌套选项卡的网页

这意味着我有两个标签，当我按下其中一个标签时，我将能够看到两个标签。

第一级选项卡对我来说工作正常，但嵌套选项卡不是。这意味着你有两个内容完全不同的标签，并且工作正常。

但是当我按下第一个标签（内嵌有标签的标签）的问题时，我可以直接看到两个标签的内容。虽然我只将其中一个设置为活动状态。

我试图让所有嵌套标签都没有任何意义，但是我试过并按预期没有任何区别

这是我的Html页面

<!DOCTYPE html>
<html>
<head>

<title>GitHub Evaluator</title>
<script type='text/javascript' src='js/jquery-2.0.3.min.js'></script>
<script type='text/javascript' src='js/knockout-2.3.0.js'></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/searchModel.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/sticky-footer.css" rel="stylesheet">
</head>

<body>
<div id="wrap">

<div class="container">
    <div class="page-header">
        <h1>GitHub Evaluator</h1>
    </div>


    <!-- Search Form -->
    <div class="row well" id="masterScope">
        <form class="form-inline">
                <label>Repo name:</label>
                <input data-bind="value: repoName" type="text" class="form-control" style="width: 30%" placeholder="Repo name">
                <label>Username:</label>
                <input data-bind="value: userName" type="text" class="form-control" style="width: 30%" placeholder="Username">
                <button data-bind="click: getRepoInfo" class="btn btn-primary">Search</button>
        </form>
    </div>
    <!-- Search Form -->


    <!-- Tabs -->
    <ul class="nav nav-tabs" id="tabs">
        <li><a href="#Repository" data-toggle="tab">Repository</a></li>
        <li><a href="#User" data-toggle="tab">User</a></li>
    </ul>
    <!-- Tabs -->

    <!-- Tab Content -->
    <div class="tab-content">

        <!-- Repo -->
        <div class="tab-pane active" id="Repository">

            <h2 id="falseRepository" class="text-danger">Repo not found!</h2>

            <!-- Repo Content -->
            <dl id="repo" data-bind="with: repository" class="dl-horizontal">

                <!-- Repo Tabs --->
                <ul class="nav nav-tabs" id="repoTabs">
                    <li><a href="#repoInfo" data-toggle="tab">Info</a></li>
                    <li><a href="#repoStats" data-toggle="tab">Stats</a></li>
                </ul>
                <!-- Repo Tabs -->

                <!-- Repo Stats -->
                <div class="tab-pane" id="#repoStats">
                    Hello World
                </div>
                <!-- Repo Stats -->

                <!-- Repo Info -->
                <div class="tab-pane active" id="repoInfo">
                    <dt>Repo ID:</dt>
                    <dd data-bind="text: id"></dd>
                    <dt>Repo Name:</dt>
                    <dd data-bind="text: name"></dd>
                    <span data-bind="with: owner">
                    <dt>Owner Name:</dt>
                    <dd data-bind="text: login"></dd>
                    <dt>Owner URL:</dt>
                    <dd><a data-bind="attr:{href: url, title: url}"><span data-bind="text: url"></span></a></dd>
                    </span>
                    <dt>Private:</dt>
                    <dd data-bind="text: isPrivate"></dd>
                    <dt>URL:</dt>
                    <dd><a data-bind="attr:{href: url, title: url}"><span data-bind="text: url"></span></a></dd>
                    <dt>Created at:</dt>
                    <dd data-bind="text: createdAt"></dd>
                    <dt>Size:</dt>
                    <dd data-bind="text: size"></dd>
                    <dt>Language:</dt>
                    <dd data-bind="text: language"></dd>
                </div>
                <!-- Repo Info -->



            </dl>
            <!-- Repo Content -->
        </div>
        <!-- Repo -->

        <!-- Users -->
        <div class="tab-pane" id="User">

            <h2 id="falseUser" class="text-danger">User not found!</h2>

            <!--User Content-->
            <div class="accordion" id="accordion2">
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                Collapsible Group Item #1
              </a>
            </div>
            <div id="collapseOne" class="accordion-body collapse in">
              <div class="accordion-inner">
                ...
              </div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                Collapsible Group Item #2
              </a>
            </div>
            <div id="collapseTwo" class="accordion-body collapse">
              <div class="accordion-inner">
                ...
              </div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
                Collapsible Group Item #3
              </a>
            </div>
            <div id="collapseThree" class="accordion-body collapse">
              <div class="accordion-inner">
                ...
              </div>
            </div>
          </div>
        </div>
            <!--User Content-->
        </div>
        <!-- Users -->

      </div>
      <!-- Tab Content -->
        </div>
      </div>

<div id="footer">
    <div class="container">
        <p class="text-muted credit">Awesome GitHub Evaluator by Michal, Abdul and Nick</p>
    </div>
</div>
<!--</script>-->
</body>
</html>

Answer 1

修正了代码中的以下内容：

从“回购统计信息”#中移除id：#repoStats应为repoStats
在<div class="tab-content">

这是一个有效的jsFiddle。

Answer 2

尝试从repoStats id中删除#。

        <!-- Repo Stats -->
        <div class="tab-pane" id="repoStats">
            Hello World
        </div>
        <!-- Repo Stats -->

嵌套标签 - Twitter Bootstrap

2 个答案: