We Keep Coding

Create click off event on animated navigation dropdown

I have 2 problems:
I'm trying to create an click-off event, where a click off of the "nav" menu is detected, which triggers the deselection of the open list element and retracts its respective dropdown content.
My current code doesn't allow another list element/navigation item without dropdown content to be added, as doing so hinders the entirety of the code from working. I'd like to add another "nav" list element that doesn't have dropdown contents, without hindering the functionality of the other list elements and their respective dropdown content.
Here is my code (also available on JSFiddle):
$(function() {
function animate() {
$('#nav .nav-ul li').off('click', animate)
var $detected = $(this).closest('.nav-ul');
$detected.find('li.detected').removeClass('detected');
$(this).addClass('detected');
//figure out which rel to show
var ulToShow = $(this).attr('rel');
//hide current rel
if ($('.substitute .sub-child.active').length > 0) {
$('.substitute .sub-child.active').hide(700, function() {
$(this).removeClass('active');
$('#' + ulToShow).fadeIn(528, function() {
$(this).addClass('active');
$('#nav .nav-ul li').on('click', animate)
});
});
} else {
$('#' + ulToShow).fadeIn(528, function() {
$(this).addClass('active');
$('#nav .nav-ul li').on('click', animate)
});
}
}
$('#nav .nav-ul li').on('click', animate);
});
* {
margin: 0;
padding: 0;
}
#nav {
background-color: /*blue*/
;
float: right;
}
#nav .nav-ul {
list-style: none;
float: right;
background-color: /*yellow*/
;
border-left: solid 2px #000000;
border-right: solid 2px #000000;
}
#nav .nav-ul li {
float: left;
padding: 4px;
font-weight: bold;
color: #000000;
}
#nav .nav-ul li:hover {
cursor: pointer;
text-decoration: underline;
color: #E51D27;
}
#nav .nav-ul li.detected {
color: #E51D27;
}
#nav .substitute {
float: right;
background-color: /*pink*/
;
margin-right: 4px;
}
#nav .substitute .sub-child {
float: left;
display: none;
}
#nav .substitute .sub-child.active {
display: block;
}
#nav .substitute .sub-child ul {
list-style: none;
}
#nav .substitute .sub-child ul li {
float: left;
padding: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nav">
<ul class="nav-ul">
<li class="" rel="pay1">Color</li>
<li rel="pay2">Shape</li>
<li rel="pay3">Size</li>
</ul>
<div class="substitute">
<div id="pay1" class="sub-child">
<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
</div>
<div id="pay2" class="sub-child">
<ul>
<li>Square</li>
<li>Circle</li>
<li>Triangle</li>
<li>Diamond</li>
</ul>
</div>
<div id="pay3" class="sub-child">
<ul>
<li>Small</li>
<li>Medium</li>
<li>Large</li>
</ul>
</div>
</div>
</div>

I'm trying to create an click-off event, where a click off of the "nav" menu is detected, which triggers the deselection of the open list element and retracts its respective dropdown content.
For this you could create a click event handler on the body that closes the menu if it's open. Something like this:
// close menu when clicking anywhere on the document
$(document).on("click", function() {
$("#nav li.detected").removeClass("detected");
$("#nav div.active").hide(700, function() { $(this).removeClass("active"); });
});
Then to avoid it from closing when you click on the menu, you can use .stopPropagation() in the animate function to stop the bubbling of the events up the DOM tree when clicking on it.
My current code doesn't allow another list element/navigation item without dropdown content to be added, as doing so hinders the entirety of the code from working. I'd like to add another "nav" list element that doesn't have dropdown contents, without hindering the functionality of the other list elements and their respective dropdown content.
This happens because you are associating and disassociating events every time that you click on the menu (something that is not really necessary), so when one of the navigation items doesn't have a dropdown associated to it, the event handler is removed (with the off() in the animate function) but it is not associated again, which causes this behavior that you don't want.
The solution is simple: there's no apparent need to be detaching and re-attaching the click event handlers every time that the animate function is called. Remove the call to off and on within the animate function and that would be it.
Here you can see both changes applied to your code:
$(function() {
function animate(e) {
e.stopPropagation();
var $detected = $(this).closest('.nav-ul');
if (!$detected.hasClass("active-animation")) {
$detected.addClass("active-animation");
$detected.find('li.detected').removeClass('detected');
$(this).addClass('detected');
//figure out which rel to show
var ulToShow = $(this).attr('rel');
//hide current rel
if ($('.substitute .sub-child.active').length > 0) {
$('.substitute .sub-child.active').hide(700, function() {
$(this).removeClass('active');
$('#' + ulToShow).fadeIn(528, function() {
$(this).addClass('active');
$detected.removeClass("active-animation");
});
});
} else {
$('#' + ulToShow).fadeIn(528, function() {
$(this).addClass('active');
$detected.removeClass("active-animation");
});
}
}
}
$('#nav .nav-ul li').on('click', animate);
// close menu when clicking anywhere on the page
$(document).on("click", function() {
$("#nav li.detected").removeClass("detected");
$("#nav div.active").hide(700, function() {
$(this).removeClass("active");
});
});
});
* {
margin: 0;
padding: 0;
}
#nav {
background-color: /*blue*/
;
float: right;
}
#nav .nav-ul {
list-style: none;
float: right;
background-color: /*yellow*/
;
border-left: solid 2px #000000;
border-right: solid 2px #000000;
}
#nav .nav-ul li {
float: left;
padding: 4px;
font-weight: bold;
color: #000000;
}
#nav .nav-ul li:hover {
cursor: pointer;
text-decoration: underline;
color: #E51D27;
}
#nav .nav-ul li.detected {
color: #E51D27;
}
#nav .substitute {
float: right;
background-color: /*pink*/
;
margin-right: 4px;
}
#nav .substitute .sub-child {
float: left;
display: none;
}
#nav .substitute .sub-child.active {
display: block;
}
#nav .substitute .sub-child ul {
list-style: none;
}
#nav .substitute .sub-child ul li {
float: left;
padding: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nav">
<ul class="nav-ul">
<li class="" rel="pay1">Color</li>
<li rel="pay2">Shape</li>
<li rel="pay3">Size</li>
<li>No Dropdown</li>
</ul>
<div class="substitute">
<div id="pay1" class="sub-child">
<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
</div>
<div id="pay2" class="sub-child">
<ul>
<li>Square</li>
<li>Circle</li>
<li>Triangle</li>
<li>Diamond</li>
</ul>
</div>
<div id="pay3" class="sub-child">
<ul>
<li>Small</li>
<li>Medium</li>
<li>Large</li>
</ul>
</div>
</div>
</div>

Change the active navbar color in css

I am using a simple top css navbar(just a css and html, without bootstrap/other framework) and i would like to change the active page. So when i go to the home page, the button color in navbar changes into red/whatever, likewise when i go to the other page...
here the code:
body {
margin: 0;
}
.logo {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f2f2f2;
float: left;
width: 25%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 40px;
text-decoration: none;
font-size: 18px;
}
li a:hover {
background-color: #111;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Division</li>
<li>Career</li>
<li>MChoice's</li>
</ul>
do you have an idea? it's ok to add javascript
Thanks a lot!

What I did here is when $(document).ready(function() {..} get the path using var url = window.location.pathname; so you know which link the user coming from therefore you know which menu item they clicked.
Then $('ul li a').each(function() {...} will check each menu item, try to match the url path with the menu's href attributes, if a match found, make that menu item active (with css active class added), if not match remove the active class if any. That should do the trick.
(note: assume your app is not single page app)
for Single page app it is much easier, deactive all menu item then active the one you clicked.
$(document).ready(function() {
//var url = window.location.pathname;
var url = 'http://stacksnippets.net/js#division';
console.log('url-->', url);
$('ul li a').each(function() {
var href = $(this).attr('href');
if (!!url.match(href)) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
});
body {
margin: 0;
}
.logo {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f2f2f2;
float: left;
width: 25%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 40px;
text-decoration: none;
font-size: 18px;
}
li a:hover {
background-color: #111;
}
.active {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Division</li>
<li>Career</li>
<li>MChoice's</li>
</ul>

The simplest solution would be to add an active class to the link of the page you're on:
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Division</li>
<li>Career</li>
<li>MChoice's</li>
</ul>
Then style those that class accordingly:
li a.active {
background: #F00;
}
If you're using a CMS (Wordpress, etc), adding some sort of active class on the active link is usually done for you. If you're doing your own static HTML, you would have to do it manually.

try below code for active menu
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('li a').on('click', function(){
$('li a').removeClass('active');
$(this).addClass('active');
});
});
</script>
<style type="text/css">
body {
margin: 0;
}
.logo {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f2f2f2;
float: left;
width: 25%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 40px;
text-decoration: none;
font-size: 18px;
}
li a:hover, li a.active {
background-color: #111;
}
</style>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Division</li>
<li>Career</li>
<li>MChoice's</li>
</ul>

To change the color of active link in your navigation you need to do the following things:
On click of navigation link add css class:
$('ul li a').click(function(){
$('li a').removeClass("active");
$(this).addClass("active");
});
Add CSS for active class
ul li a.active {
background-color: #f4f4f4;
}

One possible way is to use the active selector in CSS. This selector highlights the active element you are using when its clicked.
a:active {
background-color: yellow;
}
a:focus {
background-color: yellow;
}
You can use some JQuery to turn it on and off too. Try looking at this post here, I think you may have get your answer.
(Related to How to keep :active css style after clicking an element)
jQuery('button').click(function(){
jQuery(this).toggleClass('active');
});

function redButtons() {
$(".inclusive-buttons").on("click", "a", function() {
$(".inclusive-buttons a").css("background", "#333");
$(this).css("background", "red");
})
}
var x = document.getElementsByTagName("li");
x.onclick = redButtons();
body {
margin: 0;
}
.logo {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f2f2f2;
float: left;
width: 25%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 40px;
text-decoration: none;
font-size: 18px;
}
li a:hover {
background-color: #111;
}
a:active {
background-color: red;
}
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<ul class="inclusive-buttons">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Division</li>
<li>Career</li>
<li>MChoice's</li>
</ul>
https://jsfiddle.net/m5gm7x7e/2/

HTML Part
<div class="navbar">
<div class="navbar-fixed-top">
<div class="container" style="width: auto;">
<div class="nav-collapse" id="nav-collapse">
<ul class="nav" id="nav">
<li id="News">News</li>
<li id="Contact">Contact</li>
<li id="About">About</li>
<li id="Division">Division</li>
<li id="Career">Career</li>
<li id="skill">Skill</li>
<li id="research">Research</li>
<li id="MChoice">MChoice's</li>
</ul>
</div>
</div>
</div>
</div>
JavaScript part
$(function() {
$('#nav li a').click(function() {
$('#nav li').removeClass();
$($(this).attr('href')).addClass('active');
});
});
CSS Part
.navbar #nav > .active > a {
color: yellow;
}
here is JSFiddle result
http://jsfiddle.net/Ag47D/775/

Here's a JSFiddle: https://jsfiddle.net/timhjellum/nw3n7eka/103/
This is a jQuery option which looks at the page URL (window.location) and specifically for a string which you define in the .indexOf(" add a unique string here ") and asks if that string is greater than -1, then locate the li element with the class you assigned to it, and add another class called active.
In the example I'm using "display" because that the URL for that iFrame that JSFiddle uses so hopefully that's not confusing.
Here's the navigation:
$(document).ready(function () {
if(window.location.href.indexOf("home") > -1) {
$(".home").addClass("active");
}
if(window.location.href.indexOf("display") > -1) {
$(".news").addClass("active");
}
//make one for each nav element
});
The HTML needs to be modified like:
<ul>
<li class="home">Home</li>
<li class="news">News</li>
<li class="contact">Contact</li>
<li class="about">About</li>
</ul>
And then a simple css addition:
li.active {
background-color: white;
}
li.active a {
color: black;
}
If you can't use jQuery, let me know but this is the easiest solution for you to implement and allow you to easily modify

You could try having separate classes in your CSS file, like "ul-home," "ul-news," etc. and define different background colors for each, then simply set the class for your <ul> tag on each page to match the class you want. So:
.ul-home {
background-color: red;
}
.ul-news {
backrgound-color: yellow;
}
And then on your home page:
<ul class="ul-home>
<li>Home</li>
<li>News</li>
</ul>
On your news page:
<ul class="ul-news">
<li>Home</li>
<li>News</li>
</ul>
Etc. with all the other pages you have.

Attach event handler to every li

I have this code and I want to attach DIFFERENT event handlers to every <a> without using id or class.
I tried this but didn't work...
$('#points ul li a').on('click', function(event) {
// I don't know why this selectors doesn't work
if ($(event.target).is(':eq(0)')) {
alert('0') // and do something
}
if ($(event.target).is(':eq(1)')) {
alert('1') // and do something
}
if ($(event.target).is(':eq(2)')) {
alert('2') // and do something
}
})
#points ul {
list-style: none;
font-size: 5em;
padding: 0;
margin: 0;
line-height: .5em;
}
#points ul li {
float: left;
}
#points ul li a {
text-decoration: none;
color: grey;
padding: .1em;
line-height: .1em
}
#points {
position: relative;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="points">
<ul>
<li>.
</li>
<li>.
</li>
<li>.
</li>
</ul>
</div>
<script
Thanks in advance.

As suggested there are many alternate solutions, but the specific
error in your code was regarding your usage of :eq(0). Change it to #points>ul>li>a:eq(0) as per the jQuery documentation .
REPLACE
if ($(event.target).is(':eq(1)')) {
WITH
if ($(event.target).is('#points>ul>li>a:eq(0)')) {
Note: I have used #points>ul>li>a so that other <a> tags above and below are not selected. ( in light of your comment regarding the same )
I want to just add that if I was asked to do the same I'd take an
approach like:
var objArr = $('#points>ul>li>a');
objArr.on('click', function(event) {
switch($(objArr).index(this)){
case 0:
alert('0');
break;
case 1:
alert('1');
break;
case 2:
alert('2');
break;
}
});
That said your method works too and the WORKING EXAMPLE with the error I mentioned above adjusted for:
$('#points>ul>li>a').on('click', function(event) {
// I don't know why this selectors doesn't work
if ($(event.target).is('#points>ul>li>a:eq(0)')) {
alert('0') // and do something
}
if ($(event.target).is('#points>ul>li>a:eq(1)')) {
alert('1') // and do something
}
if ($(event.target).is('#points>ul>li>a:eq(2)')) {
alert('2') // and do something
}
})
#points>ul {
list-style: none;
font-size: 5em;
padding: 0;
margin: 0;
line-height: .5em;
}
#points>ul>li {
float: left;
}
#points>ul>li>a {
text-decoration: none;
color: grey;
margin: .1em;
}
#points>ul>li>a {
background-color: yellow;
}
div {
margin-bottom: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
random link
random link
random link
</div>
<br />
<div id="points">
<ul>
<li>.
</li>
<li>.
</li>
<li>.
</li>
</ul>
</div>
<br />
<br />
<br />
<div>
random link
random link
</div>

Include a selector before :eq()
$('#points ul li a').on('click', function(event) {
var el = $(event.target);
if (el.is('a:eq(0)')) {
alert('0') // and do something
}
if (el.is('a:eq(1)')) {
alert('1') // and do something
}
if (el.is('a:eq(2)')) {
alert('2') // and do something
}
})
#points ul {
list-style: none;
font-size: 5em;
padding: 0;
margin: 0;
line-height: .5em;
}
#points ul li {
float: left;
}
#points ul li a {
text-decoration: none;
color: grey;
padding: .1em;
line-height: .1em
}
#points {
position: relative;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="points">
<ul>
<li>.
</li>
<li>.
</li>
<li>.
</li>
</ul>
</div>
<script

Try this
var items = $('#points li a');
$('#points ul li a').on('click', function(event) {
var currentItem = event.currentTarget
if (items.index(currentItem) === 0) {
alert('0') ;
}
if (items.index(currentItem) === 1) {
alert('1') ;
}
if (items.index(currentItem) === 2) {
alert('2');
}
})
#points ul {
list-style: none;
font-size: 5em;
padding: 0;
margin: 0;
line-height: .5em;
}
#points ul li {
float: left;
}
#points ul li a {
text-decoration: none;
color: grey;
padding: .1em;
line-height: .1em
}
#points {
position: relative;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="points">
<ul>
<li>.
</li>
<li>.
</li>
<li>.
</li>
</ul>
</div>

JS Smooth Scroll not working with tabs

I am having some issue with some code I have. I have a set of tabs that have content within each of them. When a user clicks at tab, i'd like it to open the tab content AND smooth scroll to the anchor that is in the tab content. Currently, I have the following code that opens the active tabs content and scrolls to the anchor. However, it won't smooth scroll, itll just jump to the anchor. Could someone help me so that it smooth scrolls to the anchor? I would appreciate any and all help.
Current Fiddle that shows the jump
My website with a live example of what happens
Code
var hrefname = null;
$('a').click(function () {
var $tab = $(this).closest('li')
if (!$tab.hasClass("active")) {
var tabNum = $tab.index();
var nthChild = tabNum + 1;
$("ul#tabs li.active").removeClass("active");
$(this).addClass("active");
$("ul#tab li.active").removeClass("active").hide();
$("ul#tab li:nth-child(" + nthChild + ")").addClass("active").show();
}
setTimeout(function () {
$('html, body').animate({
scrollTop: $('[name="' + hrefname + '"]').offset().top
}, 500);
var href = $('a').attr('href');
console.log(href);
hrefname = href;
return false;
}, 10000);
});
HTML Tabs
<ul id="tabs">
<li class="active">FEATURES </li>
<li>SPECIFICATIONS</li>
<li>COMPARE CONFIGURATIONS</li>
<ul id="tab">
<li class="active">
<a name="features"></a>Content 1
</li>
<li>
<a name="specs"></a>Content 2
</li>
<li>
<a name="config"></a>Content 3
</li>
CSS (for those interested)
ul#tabs {
list-style-type: none;
padding: 0;
text-align: left;
}
ul#tabs li {
display: inline-block;
background-color: #ffffff;
border-bottom: solid 3px #ffffff;
padding: 5px 12px;
margin-bottom: 4px;
margin-right: 55px;
color: #e5e5e5;
font-size: 20px;
cursor: pointer;
}
ul#tabs li:hover {
border-bottom: solid 3px #dd3333;
color: #000000;
}
ul#tabs li.active {
border-bottom: solid 3px #dd3333;
color: #000000;
}
ul#tab {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#tab li {
display: none;
}
ul#tab li.active {
display: block;
}

Show and hide active class in li when clicked on input button

I want to go for next tab when i clicked on next button which is in first tab.Likewise for other two tabs as well.
I searched all stuffs and tried a lot to add active class to particular li when i clicked on button.
Please see the below code
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
$(document).ready(function() {
$('.nav-tabs > li > a').click(function(event){
event.preventDefault();//stop browser to take action for clicked anchor
//get displaying tab content jQuery selector
var active_tab_selector = $('.nav-tabs > li.active > a').attr('href');
//find actived navigation and remove 'active' css
var actived_nav = $('.nav-tabs > li.active');
actived_nav.removeClass('active');
//add 'active' css into clicked navigation
$(this).parents('li').addClass('active');
//hide displaying tab content
$(active_tab_selector).removeClass('active');
$(active_tab_selector).addClass('hide');
//show target tab content
var target_tab_selector = $(this).attr('href');
$(target_tab_selector).removeClass('hide');
$(target_tab_selector).addClass('active');
});
});
</script>
<style>
/** Start: to style navigation tab **/
.nav {
margin-bottom: 18px;
margin-left: 0;
list-style: none;
}
.nav > li > a {
display: block;
}
.nav-tabs{
*zoom: 1;
}
.nav-tabs:before,
.nav-tabs:after {
display: table;
content: "";
}
.nav-tabs:after {
clear: both;
}
.nav-tabs > li {
float: left;
}
.nav-tabs > li > a {
padding-right: 12px;
padding-left: 12px;
margin-right: 2px;
line-height: 14px;
}
.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
margin-bottom: -1px;
}
.nav-tabs > li > a {
padding-top: 8px;
padding-bottom: 8px;
line-height: 18px;
border: 1px solid transparent;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.nav-tabs > li > a:hover {
border-color: #eeeeee #eeeeee #dddddd;
}
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover {
color: #555555;
cursor: default;
background-color: #ffffff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
li {
line-height: 18px;
}
.tab-content.active{
display: block;
}
.tab-content.hide{
display: none;
}
/** End: to style navigation tab **/
</style>
<h1>CUSTOMIZE</h1>
<div>
<ul class="nav nav-tabs">
<li class="active">
Show Tab 1
</li>
<li>
Show Tab 2
</li>
<li>
Show Tab 3
</li>
</ul>
</div>
<section id="tab1" class="tab-content active">
<div>
Content in tab 1
<input type="button" name="next" value="next">
</div>
</section>
<section id="tab2" class="tab-content hide">
<div>
Content in tab 2
<input type="button" name="next" value="next">
</div>
</section>
<section id="tab3" class="tab-content hide">
<div>
Content in tab 3
<input type="button" name="next" value="next">
</div>
</section>
Please help me to find the solution.Thanks

You can find the next tab / li of the current active element and add / remove class accordingly. See below solution
$(document).ready(function() {
//register click event handler for input with name=next
$('.tab-content input[name="next"]').click(function(event){
event.preventDefault();//stop browser to take action for clicked anchor
//get parent tab of next button clicked
var $parent = $('.tab-content.active');
//get next tab
var $nextTabParent = $parent.next('.tab-content');
//check if next tab exist or not
if($nextTabParent.length > 0)
{
//remove active class from current tab and add active class to next tab
$parent.removeClass('active').addClass('hide');
$nextTabParent.removeClass('hide').addClass('active');
//remove active class from current li and add it to next li
var $activeLi = $('ul.nav.nav-tabs').find('li.active');
$activeLi.removeClass('active');
$activeLi.next('li').addClass('active');
}
});
});
.nav {
margin-bottom: 18px;
margin-left: 0;
list-style: none;
}
.nav > li > a {
display: block;
}
.nav-tabs{
*zoom: 1;
}
.nav-tabs:before,
.nav-tabs:after {
display: table;
content: "";
}
.nav-tabs:after {
clear: both;
}
.nav-tabs > li {
float: left;
}
.nav-tabs > li > a {
padding-right: 12px;
padding-left: 12px;
margin-right: 2px;
line-height: 14px;
}
.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
margin-bottom: -1px;
}
.nav-tabs > li > a {
padding-top: 8px;
padding-bottom: 8px;
line-height: 18px;
border: 1px solid transparent;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.nav-tabs > li > a:hover {
border-color: #eeeeee #eeeeee #dddddd;
}
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover {
color: #555555;
cursor: default;
background-color: #ffffff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
li {
line-height: 18px;
}
.tab-content.active{
display: block;
}
.tab-content.hide{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>CUSTOMIZE</h1>
<div>
<ul class="nav nav-tabs">
<li class="active">
Show Tab 1
</li>
<li>
Show Tab 2
</li>
<li>
Show Tab 3
</li>
</ul>
</div>
<section id="tab1" class="tab-content active">
<div>
Content in tab 1
<input type="button" name="next" value="next">
</div>
</section>
<section id="tab2" class="tab-content hide">
<div>
Content in tab 2
<input type="button" name="next" value="next">
</div>
</section>
<section id="tab3" class="tab-content hide">
<div>
Content in tab 3
<input type="button" name="next" value="next">
</div>
</section>

Add this to your code:
$(".next").click(function () {
if ($(".nav").find("li.active").next().length == 0) {
$(".nav").find("li").first().find("a").trigger("click");
} else {
$(".nav").find("li.active").next().find("a").trigger("click");
}
});
Here is the JSFiddle demo
You already wrote the codes for adding and removing classes.
So all you have to do is find the next li element that is not active, and trigger a click on its a tag (which in turn triggers your already written code).
The if statement is used to select the first li in case next is clicked when the last li is active

You can use trigger() to simulate click on tabs that already have click event
See the Fiddle
HTML
<h1>CUSTOMIZE</h1>
<div>
<ul class="nav nav-tabs">
<li class="active"> Show Tab 1
</li>
<li> Show Tab 2
</li>
<li> Show Tab 3
</li>
</ul>
</div>
<section id="tab1" class="tab-content active">
<div>Content in tab 1
<input type="button" name="next" value="next">
</div>
</section>
<section id="tab2" class="tab-content hide">
<div>Content in tab 2
<input type="button" name="next" value="next">
</div>
</section>
<section id="tab3" class="tab-content hide">
<div>Content in tab 3
<input type="button" name="next" value="next">
</div>
</section>
JS
$(document).ready(function () {
$('.nav-tabs > li > a').click(function (event) {
event.preventDefault(); //stop browser to take action for clicked anchor
//get displaying tab content jQuery selector
var active_tab_selector = $('.nav-tabs > li.active > a').attr('href');
//find actived navigation and remove 'active' css
var actived_nav = $('.nav-tabs > li.active');
actived_nav.removeClass('active');
//add 'active' css into clicked navigation
$(this).parents('li').addClass('active');
//hide displaying tab content
$(active_tab_selector).removeClass('active');
$(active_tab_selector).addClass('hide');
//show target tab content
var target_tab_selector = $(this).attr('href');
$(target_tab_selector).removeClass('hide');
$(target_tab_selector).addClass('active');
});
$('.tab-content input').click(function (event) {
$(".nav.nav-tabs li.active").next("li").find("a").trigger("click");
});
});

The following, verbose answer restructures your script to help distinguish the pattern of defining and using selectors, the modifying of your control states (i.e. adding and removing class), the usage of inline functions to depict a strategy pattern, and declarative (non-anonymous) event handling..
I also modified your html structure slightly: using button in place of input type='button' and wrapping text with span tags.
Demo Sample
(function(window, $) {
function OnClickNavTabLink(e) { // this = e.target
e.preventDefault();
var $target_tabs = $(this); // 'a'
var $target_nav = $target_tabs.parents('li');
var $target_tabs_content = $($target_tabs.attr('href')); //i.e. $('#tab1') or $('#tab2') or $('#tab3');
// note: 'attr' will return the attr of the first item in the selectors
ClearAllControlStates();
SetControlState();
function SetControlState()
{
$target_nav
.addClass('active');
$target_tabs
.addClass('active');
$target_tabs_content
.removeClass('hide')
.addClass('active');
}
}
function OnClickNextButton(e)
{
e.preventDefault();
// this = button in $target_tabs_content
var $target_tabs_content = $(this).parents('section[id*="tab"]').next();
// in this sample/demo, when clicking button in 'section#tab3', next will return 'script';
if ($target_tabs_content.attr('id')) // simple check,
{
var $target_tabs = $('.nav-tabs > li > a[href*="' + $target_tabs_content.attr('id') + '"]'); // 'a'
var $target_nav = $target_tabs.parents('li');
ClearAllControlStates();
SetControlState();
}
function SetControlState()
{
$target_nav
.addClass('active');
$target_tabs
.addClass('active');
$target_tabs_content
.removeClass('hide')
.addClass('active');
}
}
function ClearAllControlStates()
{
var $navs = $('.nav-tabs > li');
var $tabs = $navs.children('a');
var tabs_content = [];
$tabs.each(GetHrefAttr);
var $tabs_content = $(tabs_content);
//console.log("$navs:= %o - $tabs:= %o - $tabs_content:= %o", $navs, $tabs, $(tabs_content));
$navs.removeClass('active');
$tabs.removeClass('active');
$tabs_content.each(HideEach);
function GetHrefAttr(i, item)
{
tabs_content.push($(item).attr('href'));
}
function HideEach(i, item)
{
$(item).removeClass('active').addClass('hide');
}
}
function ClearActiveControlStates()
{
var $activated_nav = $('.nav-tabs > li.active'); //listitem
var $activated_tabs = $activated_nav.children('a'); //hyperlinks
var activated_tabs_content = [];
$activated_tabs.each(GetHrefAttr);
var $activated_tabs_content = $(activated_tabs_content); //section_ids
$activated_nav.removeClass('active');
$activated_tabs.removeClass('active');
$activated_tabs_content.each(HideEach);
function GetHrefAttr(i, item)
{
activated_tabs_content.push($(item).attr('href'));
}
function HideEach(i, item)
{
$(item).removeClass('active').addClass('hide');
}
}
function OnReadyDocument() {
$('.nav-tabs > li > a')
.click(OnClickNavTabLink);
$('.tab-content button[name="next"]')
.click(OnClickNextButton);
}
$(window.document).ready(OnReadyDocument);
})(window, $ || jQuery.noConflict());
/** Start: to style navigation tab **/
.nav {
margin-bottom: 18px;
margin-left: 0;
list-style: none;
}
.nav > li > a {
display: block;
}
.nav-tabs{
*zoom: 1;
}
.nav-tabs:before,
.nav-tabs:after {
display: table;
content: "";
}
.nav-tabs:after {
clear: both;
}
.nav-tabs > li {
float: left;
}
.nav-tabs > li > a {
padding-right: 12px;
padding-left: 12px;
margin-right: 2px;
line-height: 14px;
}
.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
margin-bottom: -1px;
}
.nav-tabs > li > a {
padding-top: 8px;
padding-bottom: 8px;
line-height: 18px;
border: 1px solid transparent;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.nav-tabs > li > a:hover {
border-color: #eeeeee #eeeeee #dddddd;
}
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover {
color: #555555;
cursor: default;
background-color: #ffffff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
li {
line-height: 18px;
}
.tab-content.active {
display: block;
}
.tab-content.hide{
display: none;
}
/** End: to style navigation tab **/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<h1>CUSTOMIZE</h1>
<div>
<ul class="nav nav-tabs">
<li class="active">
Show Tab 1
</li>
<li>
Show Tab 2
</li>
<li>
Show Tab 3
</li>
</ul>
</div>
<section id="tab1" class="tab-content active">
<div>
<span>Content in tab 1</span>
<button name="next">next</button>
</div>
</section>
<section id="tab2" class="tab-content hide">
<div>
<span>Content in tab 2</span>
<button name="next">next</button>
</div>
</section>
<section id="tab3" class="tab-content hide">
<div>
<span>Content in tab 3</span>
<button name="next">next</button>
</div>
</section>