Develop Reference

Using buttons wrapped in DIV elements to scroll to specific sections of the page

Ok I have different sections for my homepage.
This is the code of the menu bar:
<div class="col-xs-10 text-right menu-1 main-nav">
<ul>
<li class="active">Home</li>
<li>Services</li>
<li>About Digm</li>
<li>Contact Us</li>
<li><b>FREE Audit</b></li>
</ul>
</div>
These work fine as far as going to the sections I need them to is concerned.
But I also have buttons wrapped in DIV elements for a slideshow. The buttons work if I make them external links to leave my site, but they won't let me use them to go to the same sections I can go to with the menu bar links.
These are the DIVs with the buttons:
<div id="ubea-hero" class="js-fullheight" data-section="home">
<div class="flexslider js-fullheight">
<ul class="slides">
<li style="background-image: url(images/img_bg_1.jpg);">
<div class="overlay"></div>
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>It's time to shift strategies.</h2>
<p>FREE Audit</p>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/img_bg_2.jpg);">
<div class="overlay"></div>
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner" text-align: center>
<h2>Experience The Butterfly<br />Effect</h2>
<p>Read More</p>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/img_bg_3.jpg);">
<div class="overlay"></div>
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner" text-align: center>
<h2>Ready? Book A Consultation</h2>
<p>Why Wait?</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
The code I have for 1 the sections looks like this:
<div id="ubea-contact" data-section="contact" class="ubea-cover ubea-cover-xs" style="background-image:url(images/img_bg_2.jpg);">
<div class="overlay"></div>
<div class="ubea-container">
<div class="row text-center">
<div class="display-t">
<div class="display-tc">
<div class="col-md-12">
<h3>If you have inquiries please email us at <b>info#blahblahblah.com</b></h3>
</div>
</div>
</div>
</div>
</div>
</div>
Anyone see why the buttons won't scroll to the sections?

Anchor elements href property does that by default. Simply give the target element the id attribute matching the href="#introduction" on the menu anchor.
<div>
<ul>
<li>Intro</li>
</ul>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h4 id="intro">Intro</h4>
<p>Foo bar.</p>

What does your CSS look like?
You could always use JavaScript:
// we can't use "forEach" on a NodeList, since it's an Array prototype
var forEach = [].forEach;
// listen for an "onclick" event on the target button
document.getElementById("button_id").addEventListener("click", function() {
// select the target slide
var slide = document.getElementById("slide_1");
// show the target slide
slide.style.display = "block";
// hide the slides siblings
forEach.call(slide.parentNode.children, function(s) {
// NOTE: don't hide the target slide!
if(s !== slide) {
s.style.display = none;
}
});
});
Or if you prefer, you could just use jQuery:
$("#button_id").on("click", function() {
$(this).show().siblings().hide();
});
Also, avoid using so many div's, try to use semantic tags instead.
Too many div's will make your code hard to maintain and the overuse of the div tag can lead to a div soup, which can be horrible to maintain.
Good luck.

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.

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');
}
});