Question

所以我有3张图片标签。我可以点击所有3张图片并查看其中的内容。但是，在我点击另一个标签后，我无法看到上一个标签。

1.我点击第一个标签 - 我看到内容.. 然后我点击第二个标签 - 我看到内容.. 3.当我尝试再次点击第一个标签时 - 它不起作用..

    <ul class="nav nav-tabs">
    <?php
      if(count($box_top)): $i=1;
      foreach ($box_top->getItems() as $box_item):
    ?>

    <div class="col-md-4<?php if($i<3) echo ' border'?>">
    <div class="box-focus">
    <li>
      <a data-toggle="tab" href="#<?=$box_item->abstract?>">
      <img src="../<?=$box_item->image?>" alt="<?=$box_item->title?>" class="img-responsive">
      </a>
    </li>
    <h2><?=$box_item->title?></h2>
    </div>
    </div>

 <?php
$i++;
endforeach;
endif;
?>

</ul>


<div class="tab-content">
    <div id="WHAT" class="tab-pane fade in">
    id WHAT its from href="#<?=$box_item->abstract?>"
    </div>
    <div id="SERVICE" class="tab-pane fade">
    SECTION B content..
</div>

<div id="WHERE" class="tab-pane fade">
    Section C content...
    </div>
</div>
</div>

Answer 1

谢谢Artur Filipiak .. 我删除了ul里面的所有div，并添加了ul类来实现类似的效果..像这样：

    <ul class="nav nav-tabs">
<?php
if(count($box_top)): $i=1;
foreach ($box_top->getItems() as $box_item):
?>

    <li class="col-md-4<?php if($i<3) echo ' border'?> boxes">
    <a class="boxes" data-toggle="tab" href="#<?=$box_item->abstract?>">
    <img src="../<?=$box_item->immagine?>" alt="<?=$box_item->titolo?>" class="img-responsive boxes">
    <h2><?=$box_item->titolo?></h2>
    </a>
    </li>

 <?php
$i++;
endforeach;
endif;
?>

</ul>

单击一次后，Bootstrap Togglable Menu无法正常工作

1 个答案: