We Keep Coding

How to smooth scroll from another tabbed page to another?

I have a tabbed menu, and one of the page in tabbed menu has a link that need to go to the another tabbed page.
How to do this? I tried the smooth scroll but it's not working.
JSfiddle
HTML:
<section class="wrapper">
<ul class="tabs">
<li class="active"><span class="icons-tabbed icon-icon-tab-locator">Tab 1</span></li>
<li><span id="partner-store" class="icons-tabbed icon-icon-tab-howto">Tab 2</span></li>
</ul>
<ul class="tab__content">
<li class="active">
<div id="tab1" class="content__wrapper">
</div>
</li>
<li>
<div class="content__wrapper">
Link
</div>
</li>
</ul>
</section>

try the following click event:
$('[data-anchor="#tab1"]').on("click", function(e){
e.preventDefault();
$(".tabs > li").removeClass("active"); //Remove class from active tab
$('.tabs > li:first').addClass("active"); //Add class active to clicked tab
clickedTab = $(".tabs .active"); //Update clickedTab variable
// fade out active tab
activeTab.fadeOut(250, function(){
$(".tab__content > li").removeClass("active"); //Remove active class all tabs
var clickedTabIndex = clickedTab.index(); //Get index of clicked tab
$(".tab__content > li").eq(clickedTabIndex).addClass("active"); //Add class active to corresponding tab
activeTab = $(".tab__content > .active"); //update new active tab
activeTabHeight = activeTab.outerHeight(); //Update variable
//Animate height of wrapper to new tab height
tabWrapper.stop().delay(50).animate({
height: activeTabHeight
}, 500, function(){
activeTab.delay(50).fadeIn(250); // Fade in active tab
});
});
});
see demo:
https://jsfiddle.net/yzpjcm9b/

Jquery getting the tab to add a class when active

All of this works except for trying to get it to apply the class 'current_tab' to the 'ul.tab_nav li' when the 'ul.tab_nav li a' is clicked.
JQuery
$(document).ready(function(){
$('.tabs').each(function(){
var tab = $(this);
tab.find('.tab_content').hide(); // Hide all divs
tab.find('ul.tab_nav li a').click(function(){ //When any link is clicked
tab.find('ul.tab_nav li a').removeClass('current_tab'); // Remove active class from all links
tab.addClass('current_tab'); //Set clicked link class to active
var currentTab = tab.find($(this).attr('href')); // Set variable currentTab to value of href attribute of clicked link
tab.find('.tab_content').slideUp(); // Hide all divs
$(currentTab).slideDown(); // Show div with id equal to variable currentTab
return false;
});
});
});
and html
<div class="box tabs siteBackgroundColor">
<div class="box_header">
<ul class="tab_nav">
<li class="dummyTab"> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div class="box_content tab_content tab1 dummyTab"></div>
<div class="box_content tab_content tab2">
<p><span class="textBold">HRS:</span> Mon-Fri 7am to 3pm, Saturday 8am to 3pm <span class="textBold">KITCHEN CLOSES</span> at 2:30pm</p>
</div>
<div class="box_content tab_content tab3">3<br />
3<br />
3<br />
3</div>
<div class="box_content tab_content tab4">4<br />
4<br />
4<br />
4<br />
4</div>
</div>
Besides that it's working the way I need it to.

Try this,
tab.find('ul.tab_nav li').removeClass('current_tab');
$(this).closest('li').addClass('current_tab'); //Set clicked link li to active
Demo 1
To Set the active link only then try,
tab.find('ul.tab_nav li a').removeClass('current_tab');
$(this).addClass('current_tab'); //Set clicked link class to active
Demo 2
In Place of
tab.addClass('current_tab'); //Set clicked link class to active
Updated you should use hide() in place of slideup() which will not animate the closing div and check the active tab if it is your current_tab then use return false for that anchor click
Demo 3

Try replacing the following code
tab.find('ul.tab_nav li a').removeClass('current_tab'); // Remove active class from all links
tab.addClass('current_tab'); //Set clicked link class to active
with
tab.find('ul.tab_nav li').removeClass('current_tab'); // Remove active class from all links
$(this).parent().addClass('current_tab'); //Set clicked link class to active
Fiddle
http://jsfiddle.net/HMS37/

I edit in your code for you can learn easily:
$(document).ready(function(){
$('.tabs').each(function(){
var tab = $(this);
tab.find('.tab_content').hide(); // Hide all divs
tab.find('.tab_nav li a').click(function(){ //When any link is clicked
tab.find('.tab_nav li').removeClass('current_tab'); // Remove active class from all links
tab.addClass('current_tab'); //Set clicked link class to active
var currentTab = tab.find($(this).attr('href')); // Set variable currentTab to value of href attribute of clicked link
tab.find('.tab_content').slideUp(); // Hide all divs
$(".currentTab").slideDown(); // Show div with id equal to variable currentTab
return false;
});
});
});

How to show() a <div> based on label specified in url using javascript

My html for a tabbed menu and its content:
<div class="tab-menu"> <!-- menu -->
<ul>
<li>link to tab 1</li>
<li>link to tab 2</li>
<li>link to tab 3</li>
</ul>
</div>
<div class="tab-wrapper"> <!-- content -->
<!-- BEGIN FIRST TAB -->
<div id="tab1" class="tab">first tab content</div>
<div id="tab2" class="tab">second tab content</div>
<div id="tab3" class="tab">third tab content</div>
</div>
... and the script to make the menu work is
// Displays the first tab when
$(".tabs").each(function(){
$(this).find(".tab").hide();
$(this).find(".tab-menu li:first a").addClass("active").show();
$(this).find(".tab:first").show();
});
$(".tabs").each(function(){
$(this).find(".tab-menu a").click(function() {
$(this).parent().parent().find("a").removeClass("active");
$(this).addClass("active");
$(this).parent().parent().parent().parent().find(".tab").hide();
var activeTab = $(this).attr("href");
$(activeTab).fadeIn();
return false;
});
});
The menu works when user clicks a tab. This means the menu opens up with the first <div> visible by default and when the user clicks another tab, that corresponding <div> appears just as expected. However, when I type in the url mysite/path#tab2, it still opens up with tab1 open. What do I need to do to make it open with tab2? Specifically, how do I access the url and extract the label? I want to do this in javascript
EDIT: It seems document.location.href provides the full url. How do I parse and extract the label from this url?

When the page is loaded, check the location.hash property and behave consequently:
$(function() {
$(".tab").hide();
$(".tab-menu a").removeClass("active");
$(location.hash).show();
$(".tab-menu a[href='" + location.hash + "']").addClass("active");
});
Better than that, don't register any click listener at all, and just use the hashchange event:
$(window).hashchange(function() {
$(".tab").hide();
$(".tab-menu a").removeClass("active");
$(location.hash).show();
$(".tab-menu a[href='" + location.hash + "']").addClass("active");
});

I want to make my menu selected everytime it is clicked and changes the pages with selected menu

I have this jquery script:
<script type="text/javascript">
$(document).ready(function() {
//Default Action
$(".navigation li:first").addClass("selectedli").show(); //Activate first tab
//On Click Event
$(".navigation li").click(function() {
$(".navigation li").removeClass("selectedli"); //Remove any "active" class
$(this).addClass("selectedli"); //Add "active" class to selected tab
});
});
</script>
and css is as follows
.selectedli a {background: #3a73ba; color:#fff; cursor:default;}
and menu is written as
<div class="navigation">
<ul>
<!--<li>About Us
<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> Member Profile Message from MD History </div>
</li>-->
<li class="selectedli">Home</li>
<li>2nd Page</li>
<li>Third Page</li>
</ul>
</div>
but when I click the link and navigate to "inner_index.php" the first li is selected whereas I want to select the second li. What should I do?

you can use
:second
or
:eq(1)
So
$(".navigation li:first").addClass("selectedli").show(); //Activate first tab
will become
$(".navigation second").addClass("selectedli").show(); //Activate first tab

Controlling visibility of 2 divs simultaneously

I'm trying to use a tabbed interface to display content on a website. The first set of divs is the content (text) and the second is an associated image in a div outside the div containing the text as follows:
<div id="side-img-container">
<div class="side-img" id="image_1"><img src="image1.jpg" /></div>
<div class="side-img" id="image_2"><img src="image2.jpg" /></div>
<div class="side-img" id="image_3"><img src="image3.jpg" /></div>
<div class="side-img" id="image_4"><img src="image4.jpg" /></div>
<div class="side-img" id="image_5"><img src="image5.jpg" /></div>
</div>
<div id="content>
<ul class="tabs">
<li>Tab 1</div>
<li>Tab 2</div>
<li>Tab 3</div>
<li>Tab 4</div>
<li>Tab 5</div>
</ul>
<div class="tab_container">
<div class="tab_content" id="tab_1">Content 1</div>
<div class="tab_content" id="tab_2">Content 2</div>
<div class="tab_content" id="tab_3">Content 3</div>
<div class="tab_content" id="tab_4">Content 4</div>
<div class="tab_content" id="tab_5">Content 5</div>
</div>
</div>
This uses the following Jquery to make the tabs work:
$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
Is there any way the above javascript can be added to/adapted so that the corresponding image tab is displayed when a content tab is displayed ie: tab_1 and image_1 etc. ?

First of all, your HTML is invalid - you're closing <li> list items with </div> tags. You've also forgotten to close the quote surrounding the #content element's id attribute value.
The original JavaScript code isn't particularly efficient, so we might as well rewrite it. Using this code, you do not need each of the tab content to have a class attribute, which certainly lightens up the HTML quite a bit:
// Select all of the tab contents, then hide them
// Cache elements that need to be reused
var tabContents = $(".tab_container, #side-img-container").children().hide(),
tabs = $("ul.tabs li");
// Show the first tab's content, and add in the active class
tabs.first().addClass("active");
tabContents.filter(':first-child').show();
// Attach click event handler
tabs.click(function() {
// Cache the clicked on tab element
var $this = $(this),
// Obtain the element index number
activeTab = $this.index() + 1;
// Only change tabs if the clicked tab isn't active
if (!$this.hasClass('active')) {
// Remove the 'active' class from the original anchor and add it to the current one
$this.addClass('active').siblings().removeClass('active');
// Hide all of the other tabs and fade in the active one
tabContents.siblings().hide().filter(':nth-child(' + activeTab + ')').fadeIn();
}
return false;
});
See a simple demo of this here: http://jsfiddle.net/ND7nU/

Try this :
$('div.side-img').hide();
$('div.side-img:first').show();
$("ul.tabs li").click(function() {
$('div.side-img').eq($(this).index()).show();
// remaining code
}

Check this example on jsfiddle.net

Bit quick and dirty from the top of my head:
var s = activeTab.attr('id');
var num = s.substr(4, 1);
var imgstr = "#image-" + num;
$(".side-img").hide();
$(imgstr).show();
Edit: You can use this anywhere in the tab click event handler.
Edit 2: var s = etc Fix.