Develop Reference

I would like a button to trigger a link using jquery/JavaScript

I have a nav-pills element incorporated in my web page, which works perfectly.
The li tag will have a class of "active" if I'm on that tab and will only have a class of "test" if I'm not currently on that tab.
What I'm also trying to do is have an additional button for next and previous, so if I'm on the "Menu 1" tab and I hit next, I can go back to the "Introduction" tab. I attempted to have the button trigger the link but it doesn't work.
<div class="card">
<div class="header">
<div class="col-sm-12 text-center">
<ul class="nav nav-pills center-pills">
<li class="active" id="first" class="test"><a id="link1" class="test" href="#home">Introduction</a></li>
<li class="test">Menu 1</li>
</ul>
</div>
</div>
<div class="content">
<div class="tab-content">
<!--first tab-->
<div id="home" class="tab-pane fade in active">
<h3>Introduction</h3>
<p>Random Text </p>
<button id="next-step" class="btn btn-basic">Next</button>
</div>
<div id="menu1" class="tab-pane fade in active">
<h3>Menu1</h3>
<button id="back-step" class="btn btn-basic">Back</button>
</div>
</div>
</div>
</div>
</div>
My JavaScript looks like:
$('#back-step').click(function(){
$('link1').trigger("click");
});
$(".nav-pills a").click(function(){
if ($('#first').hasClass('active')){
$('#first').addClass('test').removeClass('active');
}
$(this).tab('show');
});

It looks like there's a typo in your JavaScript. You're not targeting the #link1 id. Try $('#link1').trigger("click"); (note the hash).

How to make a tab active with a specific URL with JQuery

On my homepage I have a button. That button leads to another page with tabs. How do make one tab active and show it's content whenever that particular button on the homepage is clicked? Is this even possible or must an event take place for this to happen?
if(location.hash) {
$('#tabbedContent').each(function(){
$(this).find("#champion" + location.hash.substr(1)).fadeIn();
});
} else {
$('#tabbedContent').each(function(){
$(this).find(':first-child').fadeIn();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="btnList">
<ul class="btnSet">
<li>
<a class="tab linkSection" href="#annual"><span>Nominate a Champion</span></a>
</li>
<li>
<a class="tab linkSection" href="#pathology"><span>Become a Champion</span></a>
</li>
<li>
<a class="tab double linkSection" href="#workshop"><span>Promote the Program</span></a>
</li>
<li>
<a class="tab double linkSection" href="#champion"><span>Contact a Champion</span></a>
</li>
</ul>
</div><!-- meetings tabbed section -->
<div class="tabbedContent onPage active" id="annual">
<div class="tabbedContent infoPage">
<div class="greyBox column col-50">
<h2>text</h2>
</div>
<div class="column col-50">
<div class="borderBox">
<h2>text</h2>
</div><br>
</div>
</div>
</div>
</div>

This problem can be solved purely with CSS.
Style all the tabs to not be visible by default and then use the CSS :target pseudo-class to style the active tab as you see fit.
/* All tabs use this class by default */
.tab { opacity:0; position:absolute;}
/* The active tab will use this rule. It's important that this selector
is a more specific selector than the default selector, which it is here. */
.tab:target { opacity:1; transition:1.5s;}
<nav>
Tab 1
Tab 2
Tab 3
Tab 4
</nav>
<div id="tab1" class="tab">
<h1>Welcome to Tab 1</h1>
</div>
<div id="tab2" class="tab">
<h1>Welcome to Tab 2</h1>
</div>
<div id="tab3" class="tab">
<h1>Welcome to Tab 3</h1>
</div>
<div id="tab4" class="tab">
<h1>Welcome to Tab 4</h1>
</div>

How to change active bootstrap tab with javascript

I have tried to change the active tab and failed to use the javascript onclick element correctly. Here's the code:
<ul class="nav nav-tabs" style="text-align: left;">
<li class="active">First</li>
<li>Second</li>
<li>Third</li>
</ul>
<div class=“tab-content">
<div id="first" class="tab-pane fade in active">
Text
Second
Third
</div>
<div id="second" class="tab-pane fade in">
Text
</div>
<div id="third" class="tab-pane fade in">
Text
</div>
</div>
How could I be able to use the buttons to change the active tab to their associated id? Please advise.
Have a great day!

you may also use .tab('show') for more flexibility
https://codepen.io/jacobgoh101/pen/ALELNr
<button class="btn btn-primary" onclick="menu3()">go to menu 3</button>
javascript:
function menu3(){
$('[href="#menu3"]').tab('show');
}
Bootstrap documentation: https://getbootstrap.com/javascript/#tabs

You can trigger click on tab you want when click on your buttons
<ul class="nav nav-tabs" style="text-align: left;">
<li class="active">First</li>
<li>Second</li>
<li>Third</li>
</ul>
<div class="tab-content">
<div id="first" class="tab-pane fade in active">
Text
<a class="btn btn-primary btn-lg" onclick="$('#second_tab').trigger('click')">Second</a>
<a class="btn btn-primary btn-lg" onclick="$('#third_tab').trigger('click')">Third</a>
</div>
....
</div>
here is a Demo

Here is your js
$('#submit').click(function (e) {
$('#myTab a[href=#tabs3-2k_tab2]').tab('show')
e.preventDefault()
});

I recommend the data attribute approach, is a clean solution and separate View from Controller code
go to menu 1
go to menu 2
javascript:
$('a[href="#btn-next"]').on('click', function(event){
event.preventDefault();
var tab = $(this).data('next');
$(tab).tab('show');
})

Updated on bootstrap5
<div class="tab-control" data-role="tab-control">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div class="frames">
<div class="frame" id="tab1">
//Content tab 1
</div>
<div class="frame" id="tab2">
//Content tab 2
</div>
</div>
</div>
var someTabTriggerEl = document.querySelector('#tab1');
var tab = new bootstrap.Tab(someTabTriggerEl);
tab.show();

Working example
jQuery(document).ready(function ($) {
$('#tabs').tab();
});
$('button').addClass('btn-primary').text('Switch to Orange Tab');
$('button').click(function(){
$('#tabs a[href=#orange]').tab('show');
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
<center><h6>Switching Among the Tabs</h6></center>
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active">Red </li>
<li>Orange</li>
<li>Yellow</li>
<li>Green</li>
<li>Blue</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
<button>Blue</button>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
<button>Blue</button>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
<button>Blue</button>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
<button>Blue</button>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
<button>Blue</button>
</div>
</div>
</div>
</div>

This is simple and works.
function do_something () {
$('#profile-tab').click();
}

If you are using Scala, refer to https://www.tutorialspoint.com/ngx_bootstrap/ngx_bootstrap_tabs.htm,
namely:
<tabset>
<tab heading="View">
<tab heading="Configuration" (selectTab)="showConfig()==true" [active]="showConfig()">`
</tabset>
(you need both selectTab and active)...
The click() solutions suggested by others are working, but are generating exception "Expression has changed after it was checked." so it seams a bad habit, even if the exception is not raised in production mode.
//bad code!
ngAfterViewInit() {
if (thisCreation){
document.getElementById("tabConfig-link").click();
}
}

I recommended this codes.
<div class="tab-control" data-role="tab-control">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div class="frames">
<div class="frame" id="tab1">
//Content tab 1
</div>
<div class="frame" id="tab2">
//Content tab 2
</div>
</div>
</div>
Add effects that you want in class attribute.

siblings() in jQuery is not working

I tried to achieve tabs using jQuery. Making the current tab class active is working, but to make its sibling's class null is not working.
jQuery(document).ready(function() {
jQuery('.container .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
console.log(currentAttrValue);
// jQuery(this).addClass('active').siblings.removeClass('active');
// Show/Hide Tabs
//jQuery(currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).addClass('active');
jQuery(this).siblings().find('a').removeClass('active');
jQuery('each_tab').not(currentAttrValue).css("display", "none");
jQuery(currentAttrValue).css("display", "block");
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="features">
<header>
<div class="features-switcher">
<div class="container">
<ul class="tab-links">
<li>
<a class="active" href="#tab1">
<span>tab one</span>
</a>
</li>
<li>
<a class="" href="#tab2">
<span>tab two</span>
</a>
</li>
<li>
<a class="" href="#tab3">
<span>tab three</span>
</a>
</li>
</ul>
</div>
</div>
<hr>
</header>
<div class="tab-content">
<div id="tab1" class="tab--active">
<section class="container">
<h2> content of tab 1</h2>
<hr>
</section>
</div>
<div id="tab2" class="tab--inactive">
<section class="container">
<h2> content of tab 2</h2>
</section>
</div>
<div id="tab3" class="tab--inactive">
<section class="container">
<h2> content of tab 3</h2>
</section>
</div>
</div>
</section>

The <a> elements in questions have no siblings. The containing <li> elements do.
Target those — and their descendant <a> tags — instead, with:
jQuery(this).parent().siblings('li').find('a').removeClass('active');
Your each_tab query can be replaced with:
jQuery('.tab-content > div').not(currentAttrValue).
hide().
addClass('tab--inactive').
removeClass('tab--active');
jQuery(currentAttrValue).
show().
addClass('tab--active').
removeClass('tab--inactive');

You're selecting the <a> tags, then calling jQuery(this).siblings(). But the <a> tags don't have any siblings; it's their parents (the <li> tags) that have siblings. You should be calling jQuery(this).parent().siblings(), instead.

How to get the real address of tabbed page in HTML/CSS?

Good Day Guys,
I just want to ask if how will I be able to get the real address in my tabbed form in in HTML/CSS.
right now I can only redirect to tabbed which is pre-set as active.
My goal is to create a link that will direct me to other tabbed page. for example, from other page want to create a link that will direct me to tabbed page 2nd tab .
here's my code:
<div class="tabs">
<ul class="tab-links">
<li class="active">All</li>
<li>Pending</li>
<li>Approved</li>
<li>Completed</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<!--Codes here -->
</div>
<div id="tab2" class="tab">
<!--Codes here -->
</div>
<div id="tab3" class="tab">
<!--Codes here -->
</div>
<div id="tab4" class="tab">
<!--Codes here -->
</div>
</div>
in the address bar it only shows this even I clicked other tab. stay with this address:
/domain/beta/page_home_superadmin.php
but in the lower side of the browser, it shows this when I hover at tab2:
/domain/beta/page_home_superadmin.php#tab2
any suggestion on how will to get that address and a be able to create a link pointing to it.
Thanks.

You can try to use document.location.hash
<div class="tabs">
<ul class="tab-links">
<li class="active tab1" id="tab1">All</li>
<li class="tab2">Pending</li>
<li class="tab3">Approved</li>
<li class="tab4">Completed</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<!--Codes here -->
</div>
<div id="tab2" class="tab">
<!--Codes here -->
</div>
<div id="tab3" class="tab">
<!--Codes here -->
</div>
<div id="tab4" class="tab">
<!--Codes here -->
</div>
</div>
JavaScript:
$(document).ready(function() {
if ( document.location.hash ) {
$('.tab-links > li, div.tab').removeClass('active');
$('li' + document.location.hash.replace('#', '.')
+ ', div' + document.location.hash).addClass('active');
}
});