Question

我的代码如下。注意标签'one'是活动的。但问题是当我打开页面时，标签真的显示活动，但标签内容没有显示;它仅在我手动点击选项卡时显示。如何解决这个问题？

<ul class="nav nav-tabs">
  <li class="nav active"><a data-toggle="tab" href="#one">One</a>
  </li>
  <li class="nav"><a data-toggle="tab" href="#two">Two</a>
  </li>
</ul>

<div class="tab-content">

  <div class="tab-pane fade in" id="one">
    <p>Tab one content</p>
  </div>

  <div class="tab-pane fade in" id="two">
    <p>Tab two content</p>
  </div>

</div>

Answer 1

在所选标签内容

上也添加课程active

<ul class="nav nav-tabs">
  <li class="nav active"><a data-toggle="tab" href="#one">One</a></li>
  <li class="nav"><a data-toggle="tab" href="#two">Two</a></li>
</ul>

<div class="tab-content">

  <!-- Show this tab by adding `active` class -->
  <div class="tab-pane fade in active" id="one">
    <p>Tab one content</p>
  </div>

  <!-- I removed `in` class here so it will have a fade in effect when showed -->
  <div class="tab-pane fade" id="two">
    <p>Tab two content</p>
  </div>

</div>

看看这个： Fiddle

Answer 2

<div class="tab-pane fade in" id="one"> <p>Tab one content</p> </div>

将此更改为

<div class="tab-pane active in" id="one"> <p>Tab one content</p> </div>

Answer 3

似乎在选项卡内容上使用“淡入淡出”和“活动”类的组合似乎与我对选项卡面板的特定用法相冲突。它仍然没有在初始页面加载时加载内容。

一旦我删除了“淡入淡出”，那么事情似乎有效。

<div class="tab-pane active" id="sales" role="tabpanel">

Answer 4

对我有用的唯一方法是使用JS。放在第一项：

<li class="nav-item active"><a class="nav-link active" ....

这段代码：

$(".nav-tabs li a").click(function(){
  $(".nav-tabs li a").removeClass("active");
  $(this).addClass("active");
});

Answer 5

我有同样的问题，但是使用了navpills。

没有其他解决方案对我有用。最后我用jquery解决了这个问题：

$(document).ready(function () 
{
    // somehow first navpill will not look active on page load (although it is...)
    $('.navpill.active').trigger('click');
});

我猜想它对于navtabs也是一样，只使用$（'。nav.active'）来找到正确的元素。

Answer 6

有时，当您尝试从后端获取值时，可能仍然无法使用。尝试在show旁边添加active：

<div class="tab-pane fade in active show" id="one">

Answer 7

在开始时添加“活动”类确实有效。

 Widget build(BuildContext context) {
return Container(
  margin: EdgeInsets.only(
    top: 18,
  ),
  child: Row(children: <Widget>[
    Stack(
      children: [
        Container(
          width: 354,
          height: 400,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10.0),
              color: Colors.white,
              border: Border.all(
                color: Colors.grey,
                width: 1,
              )),
          padding: EdgeInsets.only(left: 3),
        ),
        Container(
          width: 354,
          height: 400,
          child: Align(
            alignment: Alignment(1, -1),
        //Alignment(1, -1) place the image at the top & far left. 
        //Alignment (0, 0) is the center of the container
        //You can change the value of x and y to any number between -1 and 1
            child: Icon(Icons.bookmark_border_outlined,
                color: Colors.orange, size: 17),
          ),
        ),
      ],
    ),
  ]),
);

Bootstrap选项卡 - 活动类不在页面加载上工作

7 个答案: