如何创建标签网址

Posted

技术标签:

【中文标题】如何创建标签网址【英文标题】:How to create tab url 【发布时间】:2017-12-10 11:49:58 【问题描述】:

这是我的标签。我想在页面重新加载时打开第二个标签。我该怎么做呢

HTML

<li role="presentation" class="active">
 <a href="#details" aria-controls="details" role="tab" data-toggle="tab">Details</a>
</li>
 <li role="presentation">
<a href="#comments" aria-controls="comments" role="tab" data-toggle="tab">Comments: (<?php echo $comments_count[0]->total?>)</a>
</li>

我找到了这个 jQuery 代码,但它不起作用:

// javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) 
    $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
 

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) 
    window.location.hash = e.target.hash;
)

【问题讨论】:

【参考方案1】:

你可以使用这段代码

html 文件

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">home</div>
  <div class="tab-pane" id="profile">profile</div>
  <div class="tab-pane" id="messages">messages</div>
  <div class="tab-pane" id="settings">settings</div>
</div>

Javascript 部分

$('#myTab a').click(function(e) 
  e.preventDefault();
  $(this).tab('show');
);

// store the currently selected tab in the hash value
$("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) 
  var id = $(e.target).attr("href").substr(1);
  window.location.hash = id;
);

// on load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('#myTab a[href="' + hash + '"]').tab('show');

【讨论】:

我用这个网址重新加载。它转到消息选项卡,但页面未重新加载。 success:function(data) window.location.href = "http://localhost/demo/item-details/?id=19#messages"; ,

以上是关于如何创建标签网址的主要内容,如果未能解决你的问题,请参考以下文章

如何从服务器创建视频网址的缩略图

如何更改创建反应应用程序的基本网址?

如何创建 ASP.NET Web API 网址?

如何在浏览器中打开使用 Gmail API 创建的草稿?

如何在scrapy蜘蛛中使用url的站点地图?

如何通过按钮自动创建标签?