Create Bootstrap tab link - html

I have a tab list, like the following:
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="info_generali-tab" data-toggle="tab" href="#info_generali" role="tab" aria-controls="info_generali" aria-selected="true">Informazioni principali </a>
</li>
<li class="nav-item">
<a class="nav-link" id="moduli_lavorazione-tab" data-toggle="tab" href="#moduli_lavorazione" role="tab" aria-controls="moduli_lavorazione" aria-selected="false">Moduli Lavorazione</a>
</li>
Actually, if I click on a single tab, the url does not change. But If, ad example, I want to redirect the second tab (when click on) to the following link: /prova_uno ???

Correct your existing code will not change address, it will show a named anchor "#info_generali" or "#moduli_lavorazione".
If you want one of those tabs to not switch to a tab but instead load a new page then remove the data-toggle and set the target href to the page you wish to open:
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="info_generali-tab" data-toggle="tab" href="#info_generali" role="tab" aria-controls="info_generali" aria-selected="true">Informazioni principali </a>
</li> <!-- This one will display the tab-->
<li class="nav-item">
<a class="nav-link" id="moduli_lavorazione-tab" href="/prova_uno" role="tab" aria-controls="moduli_lavorazione" aria-selected="false">Moduli Lavorazione</a>
</li> <!-- This one will navigate to URL /prova_uno -->
</ul>
So to recap, to make one of your tab formatted navigation links open a new page instead of display a tab:
Remove the data-toggle
Set the URL in href

Related

navbar - right not working in my html file

So I am a beginner in angular and I have to simply make a navbar.I have my bootstrap loaded in the .json file and it looks like this:-
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
whereas my code looks like this:-
<ul class=" nav navbar-nav navbar-right">
<ul class="dropdown-menu">
<li >
<a class="nav-link" href="#">Save Data</a>
</li>
<li >
<a class="nav-link" href="#">Fetch Data</a>
</li>
</ul>
</ul>
</div>
</div>
</nav>
`
Output is :-
my save data and fetch data are not appearing on right.what is the reason?
Just replace "navbar-right" with "ml-auto".
But still things are wrong with your code apart from "navbar-right".
It should be -
<ul class="navbar-nav ml-auto">
<li >
<a class="nav-link" href="#">Save Data</a>
</li>
<li >
<a class="nav-link" href="#">Fetch Data</a>
</li>
</ul>
I am familiar with the tutorial you are working with, so I guess you are creating a dropdown menu, this should be the complete code for it-
<ul class = "navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown">
Manage
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Save Data</a>
<a class="dropdown-item" href="#">Fetch Data</a>
</div>
</li>
</ul>
These existing questions might help -
Bootstrap NavBar with left, center or right aligned items
ml-auto is not pushing navbar links to the right

Open other tab from sub-navbar without loading entire new HTML page

I'm working on a page in a Node Web app with a subnav that looks like this:
Here's the vanilla HTML for it:
<div class="col-md-8">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Comments</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
Is there a way for me to create live links (e.g. Comments) on those tabs without having to render a whole separate route and EJS template? To me, a process like that would be more efficient and DRY than creating separate templates for each link in the subnav.
Any help would be greatly appreciated. Thanks!

How to point another website using Bootstrap tabs?

I have tried the following code,
<ul class="nav nav-tabs">
<li class="nav-item" id="web1Tab"><a class="nav-link active" data-toggle="tab" id="w1" href="link_to_website_1">Website1</a></li>
<li class="nav-item" id="web2Tab"><a class="nav-link" data-toggle="tab" id="w2" href="link_to_website_2">Website2</a></li>
</ul>
It did look just like as I expected, however href doesn't work. On the other hand, if I remove the data-toggle="tab" part then href's work properly but active tab doesn't change. I guess that, href in this case only supports inner linking? I am not sure. The code looks very simple but I was unable solve it.
Can you try surrounding your entire list item with a href?
<ul class="nav nav-tabs">
<a style="display:block" href="your_url1_here">
<li class="nav-item" id="web1Tab">Website1</li>
</a>
<a style="display:block" href="your_url2_here">
<li class="nav-item" id="web2Tab">Website2</li>
</a>
</ul>

How to use tabs to display information of specific user instead of just the first

I am getting multiple users from an API call and all are being generated with the same html and css. When I navigate the tabs of each user only the first user changes instead of the specific user. I have tried interpolating the id but comes to no effect. Here is the code.
<div *ngFor="let user of users" class="container emp-profile">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="about-tab" data-toggle="tab" href="#about" role="tab" aria-controls="about" aria-selected="true">About</a>
</li>
<li class="nav-item">
<a class="nav-link" id="address-tab" data-toggle="tab" href="#address" role="tab" aria-controls="address" aria-selected="false">Address</a>
</li>
<li class="nav-item">
<a class="nav-link" id="company-tab" data-toggle="tab" href="#company" role="tab" aria-controls="company" aria-selected="false">Company</a>
</li>
</ul>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<div class="tab-content profile-tab" id="myTabContent">
<div class="tab-pane fade show active" id="about" role="tabpanel" aria-labelledby="about-tab">
You should not provide static id to html elements when using an *ngFor. You will get several html elements with the same id, so your <a> tags won't know where to go exactly and will target the first they encounter. That's why only your first user changes.
You can specify a dynamic id using Angular :
<div [id]="'my-tab-' + user.name"></div> // id === 'my-tab-user1'

i am not able to redirect to other page when i click the tabs in menu

hi friends i have issue with this code that when i clicked on any tab its not working ... i did not find any issue but still its not working so find solution for me. when i click on the tab it is not redirect to next page it will be in same page... please try to fix
<div class="navbar-collapse collapse">
<div class="menu">
<ul class="nav nav-tabs" role="tablist">
<li><a data-toggle="tab" href="index.html"
style="color:#8B008B;font-family: 'Autour One';"><b>Home</b>
</a></li>
<li><a data-toggle="tab" href="familytree.html"
style="color:#8B008B;font-family: 'Autour One';"><b>family
Tree</b></a></li>
<li><a data-toggle="tab" href="gallery.html"
style="color:#8B008B;font-family: 'Autour One';"><b>Gallery</b></a>
</li>
</ul>
</div>
</div>
You have to add the attribute target="_blank".
For instance:
<b>Home</b>