1

活动类不起作用，我尝试了 body On-load click trigger 并显然使用 id 和许多其他方式显示选项卡，但似乎没有任何效果。我已经对 URL 进行了哈希处理，以便在搜索中单独链接选项卡。任何帮助深表感谢。

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>

选项卡窗格：

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

3 回答 3

0

您的 Document Ready 事件似乎不起作用。尝试删除 $("document") 周围的引号。

此事件的较短方法如下：

$(function() {

});
于 2016-01-28T10:07:27.547 回答
0

你对这条线有什么期望？

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

我想 Jquery 在这里找不到元素$("home")。您可以在控制台中对其进行评估以进行检查。如果您要查找类为'home' 或id为'home' 的元素，则应正确使用 $(".home") 或 $("#home")。

于 2016-01-28T09:56:43.177 回答
0

我知道这已经很晚了，但我想发布我的解决方案，因为这也是我坚持的事情。我认为有一个重要的微妙之处很容易被忽略。您想触发对<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 窗口中的哈希值，以便绑定到选项卡事件：

$('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;
  })
})
于 2018-04-30T02:13:12.560 回答