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/

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.

Problem with add/remove class in jquery

I am trying to create a menu navigation sort of like tab's but with vertical buttons.. When I start the page, the first li class is removed and when I click any other link nothign happens other then my content div's being shown..
The first link should always be active on page start.
<script type="text/javascript">
$(document).ready(function() {
var tabContainers = $('div.pages > div');
$('div.sidemenu ul.list a').click(function () {
tabContainers.hide().filter(this.hash).show();
$('div.sidemenu ul.list li').removeClass('active');
$(this).addClass('active');
return false;
}).filter(':first').click();
});
</script>
<div class="sidemenu">
<ul class="list">
<li class="active">Login & Password</li>
<li>Contact Details</li>
<li>Company & Branch Details</li>
<li>Address Details</li>
</ul>
</div>
<div class="pages">
<div id="first">
CONTENT 1
</div>
<div id="second">
CONTENT 2
</div>
<div id="third">
CONTENT 3
</div>
<div id="forth">
CONTENT 4
</div>
</div>
Not sure what I am missing here.. Maybe its cuase I just woke up and still on my first cup of coffee.. ;)

You're adding the class to the <a> element, but removing it from its parent <li> element.
$(this).addClass('active'); // "this" is the <a> that received the event
// This removes "active" from the <li>
$('div.sidemenu ul.list li').removeClass('active');
Looks like you intend for the <li> to have the class. So you'd do this instead:
$(this).parent().addClass('active');
Or if you don't mind me mixing a little DOM API in:
$(this.parentNode).addClass('active');
Now go get a refill! ;o)

you add the "active" class to the A-Element
$(this).addClass('active');
i guess you want to add it to the LI-Element, so either you add
$(this).parent().addClass('active');
or you register the onclick on the LI-Element

jquery tabs selection

the jquery code is like this:
$(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;
});
});
and the tabs:
<ul class="tabs">
<li>Gallery</li>
<li>Submit</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<!--Content-->
</div>
<div id="tab2" class="tab_content">
<!--Content-->
</div>
</div>
whenever the page loads the 1st tab is opened 1st. but if i want the 2nd tab to show, then how can i do that. like from inside a function
im loading the page like: window.location="display.php";
when loaded i want the 2nd tab to open how to do that?? also from another function if i want the 1st tab to show how to do that?
thanks in advance..

do it like this,
$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
var index = $("ul.tabs li.active").show().index();
$(".tab_content").eq(index).show();
//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;
});
});
then on the tabs (li) on the html, set an active like,
<ul class="tabs">
<li class="active">Gallery</li>
<li>Submit</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<!--Content-->
</div>
<div id="tab2" class="tab_content">
<!--Content-->
</div>
</div>