Question

我在自定义页面上使用html标签，该页面与我的wordpress网站集成。

以下代码用于设置标签，但每个标签的所有内容都会在所有标签上显示，而不仅仅是特定区域。

下面的代码从外部来源提取javascript。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example of Bootstrap 3 Dynamic Tabs</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style type="text/css">
        .bs-example{
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="bs-example">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#sectionA">Section A</a></li>
            <li><a data-toggle="tab" href="#sectionB">Section B</a></li>
        </ul>
        <div class="tab-content">
            <div id="sectionA" class="tab-pane fade in active" style="padding-top:100px">
               <p>Testing Section A</p>
            </div>
        </div>
        <div class="tab-content">
            <div id="sectionB" class="tab-pane fade in" style="padding-top:100px">
               <p>Testing Section B</p>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

你只需要定义一次tab-content div，你要做两次。

<div class="bs-example">
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#sectionA">Section A</a></li>
    <li><a data-toggle="tab" href="#sectionB">Section B</a></li>
  </ul>
  <div class="tab-content">
    <div id="sectionA" class="tab-pane fade in active" style="padding-top:100px">
      <p>Testing Section A</p>
    </div>
    <div id="sectionB" class="tab-pane fade in" style="padding-top:100px">
      <p>Testing Section B</p>
    </div>
  </div>
</div>

请参阅我使用您的代码创建的JSFiddle，该代码演示了它应如何运作。

Answer 2

可能尝试从HTML文件的头部剪切脚本文件，并将它们放在结束体标记之前。

尝试查看bootstrap http://getbootstrap.com/getting-started/#template

的标记

Answer 3

尝试使用此HTML标记。它应该工作。

$(document).on("keyup", function(e) {
    // :input applies to input, select, textarea, etc.
    if (!$(':input').is(":focus")) {

        if (!$('input[name=query]').is(":focus")) {
            var key = e.keyCode || e.which;

            if (key == 83) { // if 's'
                $('input[name=query]').focus();
            }
        }
    }

});

Answer 4

也许你必须这样做：

<ul class="nav nav-tabs" role="tablist">
   <li role="presentation" class="active"><a href="#sectionA" aria-controls="sectionA" role="tab" data-toggle="tab">Section A</a></li>
   <li role="presentation"><a href="#sectionB" aria-controls="sectionB" role="tab" data-toggle="tab">Section B</a></li>
</ul>

<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="sectionA">...</div>
    <div role="tabpanel" class="tab-pane" id="sectionB">...</div>
</div>

供您参考： http://getbootstrap.com/javascript/#tabs

HTML标签显示所有内容

4 个答案: