I've been working at this, unfortunately I can't get the tab to be highlighted when the page loads.
I have tried using other suggestions in stack overflow such as jquery and window.onload, but none of these solutions work.
<div class="row">
<div class="col-sm-12">
<nav>
<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
<a class="nav-item nav-link" id="nav-active-tab" data-toggle="tab" href="#nav-active" role="tab" aria-controls="nav-active" aria-selected="true">ACTIVE</a>
<a class="nav-item nav-link" id="nav-notactive-tab" data-toggle="tab" href="#nav-notactive" role="tab" aria-controls="nav-notactive" aria-selected="false">INACTIVE</a>
<a class="nav-item nav-link" id="nav-pending-tab" data-toggle="tab" href="#nav-pending" role="tab" aria-controls="nav-pending" aria-selected="false">PENDING</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane active in" id="nav-active" role="tabpanel" aria-labelledby="nav-active-tab">
<div class="card">
<div class="card-header">
simply do (javascript)
document.querySelector('a[data-toggle]').focus()
This solved my issue in case anyone needs it...
<a class="nav-item nav-link active" on the one you want the tab to show active.
Related
Okay, this is probably a very foolish issue, but I am a beginner to Bootstrap and Razor Pages, and I'm not sure why this error is even happening.
I'm trying to implement tabs and their respective tab panels on a single page using ASP.net Razor Pages. As I'm just trying out stuff right now, I copied the example code from the Bootstrap nav documentation (https://getbootstrap.com/docs/5.2/components/navs-tabs/) under the Javascript Behavior section for creating tab panels. Copied below:
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">1..</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">.2.</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">..3</div>
</div>
</nav>
The page does load the tabs without issue, but refuses to let me switch between them. The best I can figure, given a "Cannot resolve ID" warning on all three hrefs in the tablist's items, for some reason the nav-items can't locate their respective tabpanels?
I can see that it's trying to access #nav-home, #nav-profile, and #nav-contact, but it's not displaying the panel content like it should, as you can see.
I've struggled to find anything online that might address this issue, likely due to triviality. I have tried adjusting the scope of the id's, as I thought, hesitantly, it might help, but nothing has produced any results. Just a few tabs that won't toggle or display their panel content.
For clarification, I'm using Bootstrap 5.1.0 and coding in JetBrains Rider.
Any help would be appreciated!
You need to use data-bs-toggle="tab" instead of data-toggle="tab".
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-bs-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">1..</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">.2.</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">..3</div>
</div>
I have tried looking up how to use nav-fill to make the nav-pills extend the width of the card, but this function doesn't work at all for me. Even the copy pasted code from the documentation doesn't work. It displays the buttons but doesn't apply the nav-fill. Here is my code below:
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs nav-pills nav-fill mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role = "presentation">
<a class="nav-item nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item" role = "presentation">
<a class="nav-item nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item" role = "presentation">
<a class="nav-item nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
<li class="nav-item">
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
i can't navigate into tabs pages only it show in URL (myweb/pages#tab1 .. myweb/pages/#tab2 ..)
please help me
enter image description here
<div class="card-body">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link " id="home-tab" data-toggle="tab" href="#page1" role="tab" aria-controls="page1"
aria-selected="true">page one</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#page2" role="tab" aria-controls="page2"
aria-selected="false">page two</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#page3" role="tab" aria-controls="page3"
aria-selected="false">page three</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="page1" role="tabpanel">
page one
</div>
<div class="tab-pane fade" id="page2" role="tabpanel" >
page two
</div>
<div class="tab-pane fade" id="page3" role="tabpanel">
page three
</div>
</div>
</div>
</div>
Try this :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
Bootstrap from that link work perfect for my and i try this on your problem and i can navigate
I am new to bootstrap and want to have nav pills in my navigation bar to switch the content of the page (like tabs). Without the navbar it is working, but i would like to have it in my navbar.
This is my code so far:
<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
<span class="navbar-brand mb-0 h1">ioBroker</span>
<ul class="navbar-nav nav-pills">
<li class="nav-item active">
<a class="nav-link active" id="tab-1" data-toggle="tab" role="tab" href="#content-1" aria-selected="true" aria-controls="content-1">Content 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab-2" data-toggle="tab" role="tab" href="#content-2" aria-selected="false" aria-controls="content-2">Content 2</a>
</li>
</ul>
</nav>
<main role="main" class="container-full">
<div class="container-full">
<div class="tab-content">
<div class="tab-pane fade show active" id="content-1" aria-labelledby="tab-1" role="tabpanel">Content 1</div>
<div class="tab-pane fade" id="content-2" aria-labelledby="tab-2" role="tabpanel">Content 2</div>
</div>
</div>
</main>
The issue i have, is that i can't switch back to an already opened "tab". I fi remove the "data-toggle" property, it works for the buttons, but not for the content switching.
Add the nav class to the nav-pills, and the content switching will work as expected for Tabs...
<ul class="navbar-nav nav nav-pills">
<li class="nav-item active">
<a class="nav-link active" id="tab-1" data-toggle="tab" role="tab" href="#content-1" aria-selected="true" aria-controls="content-1">Content 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab-2" data-toggle="tab" role="tab" href="#content-2" aria-selected="false" aria-controls="content-2">Content 2</a>
</li>
</ul>
Demo: https://www.codeply.com/go/Xr6tLFbqKj
I tried to use #href on my buttons in order to get them to change to another tab but all it ends up doing is adding #name in the url. How can I make it so my next and previous buttons change to the respective tab?
<div class="card text-left">
<div class="card-header bg-danger">
<ul class="nav nav-tabs" data-background-color="red">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" role="tab" style="color:white" href="#generalinfo">General Info</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" role="tab" style="color:white" href="#companyinfo">Company Info</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" role="tab" style="color:white" href="#socialmedia">Social Media</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active" id="generalinfo" role="tabpanel">
<form action="" id="generalInfo">
Next
</form>
</div>
</div>
</div>
<div class="tab-pane" id="companyinfo" role="tabpanel">
<form action="" id="companyInfo">
Back
Next
</form>
</div>
Any help would be greatly appreciated.