Jquery tabs help

**moesoap** · 18 Jan 2012, 05:41 PM

Hi,

I know this is not zen cart related, but if anyone can offer a solution it would be much appreciated.

I am trying to install the following tabbed box on my site, but when I click on each tab the content disappears. When the page loads the content is viewable on the first tab but when I click the second tab nothing displays and when I return to first tab there is no content displayed either.

Can anyone offer any suggestions and help prevent any further grey hairs. I have included the code below Thanks.

HTML MARKUP -

HTML Code:

<ul id="tabs">
      <li><a href="#tab1">Files and Folders</a></li>
      <li><a href="#tab2">User Profiles</a></li>
      <li><a href="#tab3">Contacts</a></li>
      <li><a href="#tab4">Applications</a></li>
      <li><a href="#tab5">Monthly Cost</a></li> 
</ul>
<div class="container" id="tab1">
    ...content goes here
</div>
<div class="container" id="tab2">
    ...content goes here
</div>
<div class="container" id="tab3">
    ...content goes here
</div>
<div class="container" id="tab4">
    ...content goes here
</div>
<div class="container" id="tab5">
    ...content goes here
</div>

CSS -

Code:

#tabs {
	border:1px solid #ccc;
	height:28px;
	background:#eff5f9;
	padding-left: 40px;
	padding-top:45px;
	-moz-box-shadow: inset 0 -2px 2px #dadada;
	-webkit-box-shadow:inset  0 -2px 2px #dadada;
	box-shadow: inset 0 -2px 2px #dadada;
	border-top-left-radius:4px;
	border-top-right-radius:4px;
}
#tabs li {
	float:left;
	list-style:none;
	border-top:1px solid #ccc;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
	margin-right:5px;
	border-top-left-radius:3px;
	border-top-right-radius:3px;
	-moz-box-shadow: 0 -2px 2px #dadada;
	-webkit-box-shadow:  0 -2px 2px #dadada;
	box-shadow: 0 -2px 2px #dadada;
}
#tabs li a {
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:bold;
	color:#000000;
	padding:7px 14px 6px 12px;
	display:block;
	background:#FFFFFF;
	border-top-left-radius:3px;
	border-top-right-radius:3px;
	text-decoration:none;
	background: -moz-linear-gradient(top, #ebebeb, white 10%);
	background: -webkit-gradient(linear, 0 0, 0 10%, from(#ebebeb), to(white));
	border-top: 1px solid white;
	text-shadow:-1px -1px 0 #fff;
	outline:none;
}
#tabs li a.inactive{
	padding-top:5px;
	padding-bottom:5px;
	color:#666666;
	background: -moz-linear-gradient(top, #dedede, white 75%);
	background: -webkit-gradient(linear, 0 0, 0 75%, from(#dedede), to(white));
	border-top: 1px solid white;
}
#tabs li a:hover, #tabs li a.inactive:hover {
	border-top: 1px solid #dedede;
	color:#000000;
}

JQUERY -

PHP Code:


<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$('#tabs li a:not(:first)').addClass('inactive');

$('.container:not(:first)').hide();

$('#tabs li a').click(function(){

var t = $(this).attr('href');

if($(this).hasClass('inactive')){ //added to not animate when active

$('#tabs li a').addClass('inactive');

$(this).removeClass('inactive');

$('.container').hide();

$(t).fadeIn('slow');

}

return false;

}) //end click

});

</script>

**moesoap** · 18 Jan 2012, 07:01 PM

Ok, this works. My mistake.

**welchyboy** · 24 Jul 2013, 12:47 AM

I am using code that is very similar to this however it doesn't do exactly what it is supposed to do. It works perfectly outside of zen cart so I know the code works perfectly. The issue is whenever it calls another tab it uses <a href="#tab" but when I click on the tab it takes me to the home page. I figured out why. If i hover over the tab the hyperlink is http://thewebsite.com/#tab however it is supposed to show http://thewebsite.com/thepage.htm/#tab. The tabs "work" if I put

Code:

<li><a href="/index.php?main_page=page_4#tab1" class="default tab1 tabpages">Tab One</a></li>

the only problem is the page basically refreshes and then goes to the tab instead of instantly going to the page.

Here is the entire code in a working html page. The site that I am currently having the issue with is stx*milling*.com (REMOVE THE *)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>





<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Ubuntu:500,700' rel='stylesheet' type='text/css' />

<!--[if gte IE 7]><!-->
<script type="text/javascript">var switchTo5x=true;</script><script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'fdc2c422-ae8d-414c-a5bb-68c389e4688d'});</script>
<!--<![endif]-->

<link rel="stylesheet" media="all" type="text/css" href="../styles/default.css" />

<style type="text/css">

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/cssplay-tabbed-pages.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
.hiddenTarget {display:none; position:fixed;}
.tabbedPages {position:relative; margin:50px 0;}
ul.tabs {padding:0; margin:0; list-style:none; float:left; position:relative; z-index:100;}
ul.tabs li {float:left; margin-right:2px;}
ul.tabs li a {display:block; font:normal 12px/30px arial, sans-serif; border:1px solid #aaa; border-radius:5px 5px 0 0; background:#69c; padding:0 20px; text-decoration:none; color:#fff;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.3)));
background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:-ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:-o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
}

.tabcontent {float:left; width:700px; padding:20px; border:1px solid #aaa; border-radius:0 5px 5px 5px; background:#fff; position:relative; z-index:10; display:none; clear:left; top:-1px;
 box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);
}
.tabcontent p {padding:0 0 5px 0; margin:0; font:normal 12px/20px arial, sans-serif; color:#333;}
.tabcontent h4 {padding:0 0 10px 0; margin:0; font:bold 14px/25px arial, sans-serif; color:#000;}
.tabcontent img {border:1px solid #444; display:block; float:left; margin:0 20px 0 0; box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);}

/* change the tab to selected style */
ul.tabs li a.default,
#tab1:target ~ .tabbedPages .tabs li a.default,
#tab2:target ~ .tabbedPages .tabs li a.tab2,
#tab3:target ~ .tabbedPages .tabs li a.tab3,
#tab4:target ~ .tabbedPages .tabs li a.tab4,
#tab5:target ~ .tabbedPages .tabs li a.tab5 {background-color:#fff; border-bottom:1px solid #fff; color:#000;}

/* show the tab content */
div.default,
#tab1:target ~ .tabbedPages div.default,
#tab2:target ~ .tabbedPages div#view2,
#tab3:target ~ .tabbedPages div#view3,
#tab4:target ~ .tabbedPages div#view4,
#tab5:target ~ .tabbedPages div#view5 {display:block;}

/* reset the unclicked tabs to default */
#tab2:target ~ .tabbedPages .tabs li a.default,
#tab3:target ~ .tabbedPages .tabs li a.default,
#tab4:target ~ .tabbedPages .tabs li a.default,
#tab5:target ~ .tabbedPages .tabs li a.default {background-color:#69c; border:1px solid #888; color:#fff;}

/* hide the default tab when selecting other tabs*/
#tab2:target ~ .tabbedPages div.default,
#tab3:target ~ .tabbedPages div.default,
#tab4:target ~ .tabbedPages div.default,
#tab5:target ~ .tabbedPages div.default {display:none;}

.clear {clear:left;}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript">
/* fix to remove the back button history - Firefox, Chrome and Safari */
$(document).ready(function () {
$("a.tabpages").click(function () {

  page = $(this).attr('href');
  if ($.browser.msie && $.browser.version>8 || !$.browser.msie) 
  {
    url = window.location.href.split('#')[0];
    text = url + page;
    history.replaceState({}, "", text);
  }

});
});
</script>


</head>

<body id="www-cssplay-co-uk" class="demos">
<b id="tab1" class="hiddenTarget"></b>
<b id="tab2" class="hiddenTarget"></b>
<b id="tab3" class="hiddenTarget"></b>
<b id="tab4" class="hiddenTarget"></b>
<b id="tab5" class="hiddenTarget"></b>
<div class="tabbedPages">
	<ul class="tabs">
		<li><a href="#tab1" class="default tab1 tabpages">Tab One</a></li>
		<li><a href="#tab2" class="tab2 tabpages">Tab #2</a></li>
		<li><a href="#tab3" class="tab3 tabpages">Tab No.3</a></li>
		<li><a href="#tab4" class="tab4 tabpages">The Fourth Tab</a></li>
		<li><a href="#tab5" class="tab5 tabpages">Any Content</a></li>
	</ul>
	<div id="view1" class="tabcontent default">
		<h4>Tab 'persist'</h4>
		<p>The most recently clicked tab will be remembered and stay open even if you click elsewhere on the page or if the page is reloaded.</p>
	</div>
	<div id="view2" class="tabcontent">
		<h4>Multiple Tabs</h4>
		<p>You can have multiple tabs on the same page, with only one copy of the CSS (javascript is not required).</p>
	</div>
	<div id="view3" class="tabcontent">
		<h4>Tab Action from elsewhere on the same page.</h4>
		<p>You can also open a tab using links elsewhere on the same page.</p>
		<p>If you click this <a href="#tab1" class="tabpages">LINK</a> you will open 'Tab One' content, and if you click the link beneath this Tab Content you will open 'Tab #2' content.</p>
	</div>
	<div id="view4" class="tabcontent">
		<h4>Opened by a link from another page</h4>
		<p>Link from another page can select a tab on the target page when loaded.</p>
	</div>
	<div id="view5" class="tabcontent">
		<h4>No restrictions on tab content</h4>
		<img src="pollensa.jpg" alt=" Polenca - Mallorca" />
		<p>Port de Pollença (Catalan pronunciation: [ˈpɔrd də poˈʎɛnsə]) (Puerto Pollensa in Castilian Spanish) is a small town in north-eastern Mallorca, Spain, situated on the Bay of Pollença. It is located about six kilometres east of the inland town of Pollença and two kilometres southeast of Cala Sant Vicenç.</p>
		<p>From <a href="http://en.wikipedia.org/wiki/Port_de_Pollen%C3%A7a">Wikipedia</a>, the free encyclopedia.</p>
		<br />
		<p>Photograph &copy stu nicholls</p>
	</div>
</div>


		
</body>
</html>

**DrByte** · 24 Jul 2013, 05:08 AM

Originally Posted by welchyboy

The issue is whenever it calls another tab it uses <a href="#tab" but when I click on the tab it takes me to the home page. I figured out why.

Apparently you've fixed it, because your page_4 isn't taking me to the home page anymore.

**welchyboy** · 25 Jul 2013, 08:03 PM

Originally Posted by DrByte

Apparently you've fixed it, because your page_4 isn't taking me to the home page anymore.

Well I managed to at least get it to go back to the correct page however it looks like it refreshes and it isnt supposed to do that. Here is a link to the same exact code on the same site outside of zencart...so you can see what it is supposed to do. By the way thanks for the response and the assistance!

stxm*illing*.com/tabs.html (remove the *)