Question

我的目标是让这些标签工作并保持btn-group视觉风格。

但是，除非我完全更改content_navigation的结构（使用<ul>和<li>而不是包含链接的<div>，否则它似乎无效，这使标签看起来完全不同。

看起来我必须在具有功能选项卡或具有良好外观btn-group之间进行选择。我确信有办法解决这两个问题，但我无法弄清楚如何。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Tab test</title>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>

<body class="row">
  <div class="col-sm-6">
    <div id="content_navigation" class="btn-group" role="group" aria-label="...">
      <a type="button" href="#content_1" class="btn btn-default"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> To 1</a>
      <a type="button" href="#content_1" class="btn btn-default hidden"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> To 1 again</a>
      <a type="button" href="#content_1" class="btn btn-default hidden"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> To 1 again, and again</a>
      <a type="button" href="#content_2" class="btn btn-default"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> To 2</a>
      <a type="button" href="#content_3" class="btn btn-default"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> To 3</a>
      <a type="button" href="#content_4" class="btn btn-default"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> To 4</a>
    </div>
    <div id="content_1">
      Content n°1
    </div>
    <div id="content_2">
      Content n°2
    </div>
    <div id="content_3">
      Content n°3
    </div>
    <div id="content_4">
      Content n°4
    </div>
  </div>
  <script>
    $(function() {
      $("#content_navigation").tabs();
    });
  </script>
</body>

</html>

Answer 1

您必须为所有data-toggle="tab"内容#content_navigation a添加tab-pane，并为所有div内容添加<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Tab test</title> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> </head> <body class="row"> <div class="col-sm-6"> <div id="content_navigation" class="btn-group" role="group" aria-label="" role="tablist"> <a type="button" href="#content_1" class="btn btn-default" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> To 1</a> <a type="button" href="#content_1" class="btn btn-default hidden" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> To 1 again</a> <a type="button" href="#content_1" class="btn btn-default hidden" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> To 1 again, and again</a> <a type="button" href="#content_2" class="btn btn-default" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> To 2</a> <a type="button" href="#content_3" class="btn btn-default" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> To 3</a> <a type="button" href="#content_4" class="btn btn-default" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> To 4</a> </div> <div class="tab-content"> <div id="content_1" role="tabpanel" class="tab-pane active"> Content n°1 </div> <div id="content_2" role="tabpanel" class="tab-pane"> Content n°2 </div> <div id="content_3" role="tabpanel" class="tab-pane"> Content n°3 </div> <div id="content_4" role="tabpanel" class="tab-pane"> Content n°4 </div> </div> </div> <script> $(function() { $("#content_navigation").tabs(); }); </script> </body> </html>

＆＃13;

var i = 2;
/* button  #add_btn */
$(document).on("click", "#add_btn", function(evt) {
  $('.add_checkbox').append("<input type='checkbox' id=foodcheckbox_" + i + " style='margin-bottom:20px;'><br/>");

  $(".add_food").append("<input class='wide-control form-control default input-sm foodha' type='text' placeholder='Food' id=food_input" + i + " style='margin-bottom:5px;'>");

  $(".add_price").append("<input class='wide-control form-control default input-sm priceha' type='text' placeholder='Price' id='price_input" + i + "' style='margin-bottom:5px;'>");
  i++;
});

＆＃13;

功能选项卡看起来像一个btn组

1 个答案: