如何激活当前选项卡

时间:2016-09-26 06:34:56

标签: javascript jquery angularjs twitter-bootstrap

我想在刷新页面后激活当前选项卡。我使用了以下代码,即使它不起作用我已经使用Bootstrap和AngularJS在index.html中编写了这个

有人能解决这个问题吗?

<ul role="navigation" class="nav nav-pills" id="MyTab">
  <li role="presentation" class="active" data-toggle="tab">
    <a href="#active">Active</a>
  </li>
  <li role="presentation" data-toggle="tab">
    <a href="#list">list</a>
  </li>
  <li role="presentation" data-toggle="tab">
    <a href="#add">Add</a>
  </li>
  <li role="presentation" data-toggle="tab">
    <a href="#search">Search</a>
  </li>
</ul>

<script>
$(document).ready(function(e) {
  $("a[data-toggle='tab']").on("show.bs.tab", function(e) {
    localStorage.setItem("activeTab", $(e.target).attr("href"));
  });
  var activeTab = localStorage.getItem("activeTab");
  if(activeTab) {
    $("#myTab a[href='" + activeTab + "']").tab("show");
  }
});
</script>

我正在使用此JavaScript尝试此功能,但它无法正常工作,请让我知道我哪里出错了。

1 个答案:

答案 0 :(得分:0)

从localStorage获取活动并将其分配给范围变量。

<div class="carousel-inner">
    <?php 
        foreach($news_data as $key => $nws){
    ?>
    <div class="item <?php echo $key == 0 ? "active":""; ?>"> 
        <div class="col-md-12 news-item" style="padding-left: 0;">
            <p><?php echo $nws->news_desc; ?></p>
        </div> 
    </div>
    <?php } ?>
</div>

根据activetab值设置活动类。

$scope.activetab=localStorage.getItem('activeTab');