How to show URL off Pills Bootstrap

Question

When i select a pill on the list i need to show an URL to use in other thing, but it has an href="#pills-something" who direct to a id bellow.

I need something like:

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>

show an URL where ? do you mean to go the link or show the link to the **tab-pane** ? — Mohsen TOA, Aug 17 '21 at 13:29
Does this help? https://stackoverflow.com/questions/34491182/make-bootstrap-tab-active-on-the-bases-of-url-link — Phaelax z, Aug 17 '21 at 13:52

score 1 · Accepted Answer · answered Aug 17 '21 at 13:35

If I've understood what you're asking correctly, it sounds like you're wanting to look like you're navigating, without actually navigating? If so, the only real way I can think of doing it is to put it in the query string (i.e. mysite.com/mypage?tab=pills-profile). If that's suitable for you then you just need to alter your Page_Load method to check the query string for the parameter.

This will check the query string if added the Page_Load method in the ASPX code behind.

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

Then, if you alter the HTML to:

<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>

You can use various different methods to show the relevant panel.

How to show URL off Pills Bootstrap

1 Answers1