Question

我在其中一个页面上有一个基于标签的导航，当前刷新页面时，它不记得哪个标签处于活动状态。我对`window.location.hash＆＃39;做了一些研究。但没有找到任何清楚解释这是如何工作的东西。这是我目前拥有的：

<div id="myCarousel" class="carousel slide" data-ride="carousel" style="width:100%">       
   <ul class="nav nav-pills nav-justified" >
      <li style="margin-left:0px;" data-target="#myCarousel" data-slide-to="0" class="active"><a class="tab" href="#">1</a></li>
      <li data-target="#myCarousel" data-slide-to="1"><a class="tab" href="#">2</a></li>
      <li data-target="#myCarousel" data-slide-to="2"><a  class="tab"href="#">3</a></li>
      <li data-target="#myCarousel" data-slide-to="3"><a  class="tab"href="#">4</a></li>
   </ul>

   <div class="carousel-inner" style="width:100%; margin-top:-6px; ">
      <div class="item active">
         1
      </div>      

      <div class="item">
         2
      </div>

      <div class="item"> 
         3         
      </div>

      <div class="item"> 
         4
      </div>

   </div>        
</div>

JS

$(document).ready(function () {
    $('#myCarousel').carousel({
        interval: false
    });

    var clickEvent = false;

    $('#myCarousel').on('click', '.nav a', function () {
        clickEvent = true;
        $('.nav li').removeClass('active');
        $(this).parent().addClass('active');
    });

    $('#myCarousel').bind('slid', function () {
        // Get currently selected item
        var item = $('#myCarousel .carousel-inner .item.active');

        // Deactivate all nav links
        $('#myCarousel .nav li').removeClass('active');

        // Index is 1-based, use this to activate the nav link based on slide
        var index = item.index() + 1;
        $('#myCarousel .nav li:nth-child(' + index + ')').addClass('active');
    });
});

如何使用window.location.hash刷新所选标签？

Answer 1

第一个解决方案是为链接设置href属性：

<ul class="nav nav-pills nav-justified" >
  <li style="margin-left:0px;" data-target="#myCarousel" data-slide-to="0" class="active"><a class="tab" href="#slide1">1</a></li>
  <li data-target="#myCarousel" data-slide-to="1"><a class="tab" href="#slide2">2</a></li>
  <li data-target="#myCarousel" data-slide-to="2"><a class="tab" href="#slide3">3</a></li>
  <li data-target="#myCarousel" data-slide-to="3"><a class="tab" href="#slide4">4</a></li>
</ul>

然后在页面加载后：

$(function() {
  var slide = window.location.hash;
  if (slide) {
    $("a[href='" + slide + "']").click();
  }
});

第二种解决方案是使用localStorage：

$('#myCarousel').on('click', '.nav a', function (e) {
    clickEvent = true;
    $('.nav li').removeClass('active');
    $(this).parent().addClass('active');

    localStorage.setItem('slide', $(e.currentTarget).attr('href'));
});

$(function() {
  var slide = localStorage.getItem('slide');
  if (slide) {
    $("a[href='" + slide + "']").click();
  }
});

Answer 2

您可以在php脚本中设置js变量。即使在刷新页面后，该变量也可用于触发特定选项卡。

例如 -

<script>
   var wdm_shp = 2;
</script>

在js文件中，您可以将就绪事件的以下代码写入活动的特定选项卡 -

if(  typeof wdm_shp != 'undefined' ) {
    if(wdm_shp == 2)
        jQuery("#tab1").trigger('click');
    if(wdm_shp == 3)
        jQuery("#tab2").trigger('click');
}

//上面的语句将识别值并激活特定选项卡。

在页面刷新时保持选定选项卡

2 个答案: