时间戳

首页 > 解决方案 > 如何在 Pills Bootstrap 中显示 URL

javascript - 如何在 Pills Bootstrap 中显示 URL

问题描述

当我在列表中选择一个药丸时，我需要显示一个用于其他事情的 URL，但它有一个 href="#pills-something" 指向下面的 id。

我需要类似的东西：

mysite.com/myspecificpill or
mysite.com/pills-home-tab
mysite.com/pills-contact

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

标签： javascripthtmljquerycssbootstrap-4

解决方案

如果我正确理解了您的要求，那么听起来您希望看起来像是在导航，而不是实际导航？如果是这样，我能想到的唯一真正的方法是将它放在查询字符串中（即 mysite.com/mypage?tab=pills-profile）。如果这适合您，那么您只需要更改 Page_Load 方法来检查参数的查询字符串。

如果在后面的 ASPX 代码中添加了 Page_Load 方法，这将检查查询字符串。

if(Request.QueryString["tab"] != null && Request.QueryString["tab"] == "pills-profile")
{
   //Do the relevant stuff for the profile page here
}

然后，如果您将 HTML 更改为：

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="mypage?tab=pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="mypage?tab=pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="mypage?tab=pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

您可以使用各种不同的方法来显示相关面板。

推荐阅读