Question

活动类没有工作，我已经尝试了body on-load点击触发器，显然使用id和许多其他方式显示选项卡，但似乎没有任何工作。我已经对网址进行了哈希处理，以便在搜索中单独链接标签。任何帮助深表感谢。

JS：散列URL并跳转到标签

// jump to tab if it exists 
if (location.hash) {
  $('a[href=' + location.hash + ']').tab('show');
  }

  // add tab hash to url to persist state
  $(document.body).on("shown.bs.tab", function(e){
  location.hash = e.target.hash;
  });

});

JS：去标签主页（不工作）

$("document").ready(function(){
$("#home").trigger("click");
});

HTML：

<div class="col-xs-5 col-md-2 nopadding">
  <nav class="nav-sidebar">
    <ul class="nav tabs">
    <li class="lead3"><a href="#home" class="active" data-toggle="tab">Home </a></li>
   <li class="lead3"><a href="#tab1" data-toggle="tab">tab1</a></li>
   <li class="lead3"><a href="#tab3" data-toggle="tab" >tab3</a></li>                               
   <li class="lead3"><a href="#contact" data-toggle="tab"> Contact </a></li>                                                                                                                   
 </ul>
</nav>

tab-pane：

<div class="tab-pane active fade text-style" id="home"> . .. </div>

Answer 1

您对这条线的期望是什么？

$("home").trigger("click");

我想Jquery在这里找不到元素$("home")。你可以在控制台中评估它以进行检查。如果你要找到 class 'home'或 id 'home'的元素，那么你应该使用$（“。home”）或$（“＃home”）正常。

Answer 2

看起来您的Document Ready事件不起作用。请尝试删除$（“文档”）周围的引号。

此事件的简短方法如下：

$(function() {

});

Answer 3

我知道这已经很晚了但是我想发布我的解决方案，因为这也是我坚持的事情。我认为很容易错过一个重要的微妙之处。您想触发导航内<a>标记的点击，而不是实际的面板。请记住，单击面板上没有的选项卡可将其触发进入视图。因此，要获得正确的选项卡，以便在用户导航到/my/path#home时显示您要绑定hashchange事件并单击正确的元素。有关绑定到hashchange事件的更多信息，请参阅https://stackoverflow.com/a/680865/5262119。

$(window).bind('hashchange', function(event){
  var hash = window.location.hash;
  // get the actual anchor tag that links to the panel
  var $matchingAnchor = $('nav a[href^="' + hash + '"');
  if ($matchingAnchor) $matchingAnchor.click();
});

如果您想限制此操作仅触发某个页面，则可以添加位置检查：

$(window).bind('hashchange', function(event){
  var path = window.location.pathname;
  var hash = window.location.hash;
  var $matchingAnchor = $('nav a[href^="' + hash + '"');

  var contextRegex = /my\/page/;
  var correctPage = contextRegex.test(path);
  if (correctPage && $matchingAnchor) $matchingAnchor.click();
});

我想你也想确保选项卡上的点击更新URL窗口中的哈希值，然后绑定到tabs事件：

$('nav a').on('click',function() {
  var $a = $(this);
  var hash = $a.attr("href");
  window.location.hash = hash;
});

这将进入您的ready功能。您还必须确保在首次加载页面时发生触发点击的功能。

完整的解决方案：

$(document).ready(function() {
  // Declare clickback function
  function triggerTabClick() {
    var path = window.location.pathname;
    var hash = window.location.hash;
    var $matchingAnchor = $('nav a[href^="' + hash + '"');    

    var contextRegex = /my\/page/; // or whatever you want this to be
    var correctPage = contextRegex.test(path);
    if (correctPage && $matchingAnchor) $matchingAnchor.click();
  }    

  // Trigger it when the hash changes
  $(window).bind('hashchange', triggerTabClick);    

  // Trigger it when the page loads
  triggerTabClick();    

  // Hook into click for tabs to make sure hash is updated on click
  $('nav a').on('click',function(event){
    event.preventDefault();
    var $a = $(this);
    var hash = $a.attr("href");
    var window.location.hash = hash;
  })
})

Onload引导程序选项卡触发器

3 个答案: