Tab menu needing different outcomes when clicked - javascript

I have the following simple html that has a tab menu with some javascript to change content when tabs are clicked.
test.html
<!DOCTYPE html>
<html>
<head>
<title>My Menu Test</title>
<style type="text/css" media="all">#import "public/stylesheets/master.css";</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script><!--
$(document).ready(function() {
$('.tablist > 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 = $('.tablist > li.active > a').attr('href');
//find actived navigation and remove 'active' css
var actived_nav = $('.tablist > 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>
</head>
<body>
<div id="page-container">
<div id="main-nav">
<ul class="tablist">
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Logout</li>
</ul>
</div>
<div id="content">
<section id="tab1" class="tab-content active">
<div>
Content for Tab1
</div>
</section>
<section id="tab2" class="tab-content hide">
<div>
Content for Tab2
</div>
</section>
<section id="tab3" class="tab-content hide">
<div>
Content for Tab3
</div>
</section>
</div>
</div>
</body>
</html>
master.css
.tablist { list-style: none; height: 30px; padding: 0; margin: 0; border: none; }
.tablist li { float:left; margin-right: 3px; }
.tablist li a { display:block; padding:0 16px; text-decoration:none; border: 1px solid #babdb6; border-bottom:0; font:bold 14px/32px arial,geneva,helvetica,sans-serif; color:#000; background-color:#ccc;
/*=== CSS 3 elements ===*/
webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.tablist li a:hover { background:#babdb6; color:#fff; text-decoration:none; }
.tablist > .active > a,
.tablist > .active > a:hover { color: #555555; cursor: default; background-color: #ffffff; border: 1px solid #ddd; border-bottom-color: transparent; }
.tab-content.active{ display: block; }
.tab-content.hide{ display: none; }
When I click on Tab1, Tab2 or Tab3 I get the relevant div being displayed and the others being hidden. I do want this functionality unless there is a better way of including different content based on the tab that was clicked. If there is a better way to do this I would appreciate a heads up, however that is probably for a different question.
My Question for now:
I would like to run a different action if you will when I click on the Logout tab. However I still want that logout tab to look the same as the others. Is there a way that when I click the logout tab the url "/logout" actually takes me too the logout page (not provided in this example) instead of trying to hide dive like the other tabs do?
Many Thanks

I like the idea of excluding the logout button from the click function entirely, and writing its own handler (as #xCRKxTyPHoon shows), however, if you desire to still use that click function, and want to be able to add more links in the same fashion without having to write separate handlers for each, you could add something like this at the start of the click function (checks if the href attribute has a slash, and redirects if it does):
if($(this).attr('href').indexOf('/') !== -1){
window.location = $(this).attr('href');
}
Here's a pen with that in there: http://codepen.io/shigidaMark/pen/YqNWRy

The selector $('.tablist > li > a') will find all anchor tags nested within the 'tablist' class object. This includes your logout tagLogout. This is why your logout tab acts like the other tabs.
There are several methods to exclude the logout tab from that loop. The easiest method off the top of my head is to give the anchor an ID and use a :not selector:
<a id="logout" href="/logout">Logout</a>
Your new loop selector would look like this:
$('.tablist > li > a').not('#logout')
Once you exclude the tab from that code, you should be able to handle it separately to have it redirect to the page you want.

Related

Make The navigation button highlighted

i have two navigation buttons
i need to change the background colour of one navigation button to orange when it is clicked,and remains unchanged untill another button is clicked,i tried some javascript codes but not working how to implement it in a simple way.
<div>
<ul class="tab">
<li><a href="register.php" >Job Seeker</a></li>
<li><a href="company.php" >Company</a></li>
</ul>
</div>
it's as simple as adding a few lines in your style.css file
for example:
a:active {
background-color: yellow;
}
If you were to look at a javascript solution, it's simply toggling the clicked element to a given class, and removing that same class from all other menu elements. The pure CSS solution is far more elegant, but this way also works. Also, if you're doing something like toggling visibility of content divs (or fetching content via ajax for each nav item clicked), this gives you a convenient place to hook that functionality.
Note that, while I did use jQuery, the same could easily be done via pure javascript, if preferred. jQuery simply allows for RAPID prototyping.
$(".nav-pane li").on("click", function(){
$(this).addClass("clicked")
.siblings().removeClass("clicked");
});
.nav-pane ul {
background-color: #4059b2;
width: 100%
list-style-type: none;
}
.nav-pane ul li {
display: inline-block;
padding: 0px;
width: 24%;
height: 20px;
}
.nav-pane ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
color: white;
}
.nav-pane ul li.clicked {
background-color: #ff8605;
}
.nav-pane ul li.clicked a {
color: #4059b2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-pane">
<ul class="tab">
<li>Job Seeker</li>
<li>Company</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>

Adding class or CSS:active using javascript

I need some help with both JS and CSS. I am using JS to hide and show subsections from one specific navigation bar on the website. First problem is, that I would like the JS code to specifically only work for that navigation bar and not the many others on the same site. Below is the JS code:
$('a').click(function(){
$('section').hide();
$($(this).attr('href')).show();
});
And below is the HTML code. I was wondering if I could somehow use the "navigation" class to select only this navigation bar in the JS code?
<ul class="navigation">
<li class="link">Tab1</li>
<li class="link">Tab2</li>
<li class="link">Tab3</li>
</ul>
Next problem has to do with the CSS. I would like to have the #content1, Tab1 be default when the site loads - and would like to have the text in it set to a color that is different from the rest (red or whatever). When tab2 is selected I would like that to change color while tab1 switches to black like the others etc. However I can't get the :active method to work in CSS (I guess because the JS really doesn't set it active.) Can anybody help me with that? Below is my CSS code (not all is relevant).
section {
display: none;
}
section:first-of-type {
display:block;
}
.navigation {
list-style: none;
}
li {
display: inline-block;
}
.nav2 {
display: inline-block;
width: 100px;
margin-right: 25px;
margin-bottom: 25px;
padding: 5px 5px 5px 5px;
background-color: #ffffff;
border: 1px;
border-style: solid;
border-color: #000000;
text-align: center;
text-decoration: none;
color: #000000;
}
Thank you very much in advance!
Create a CSS class that will be in charge of styling the active element. For this example we will use the class .active. It's important to notice that this is not a Pseudo-Class.
We will use a simple HTML markup for the tabs:
<ul class="tabs">
<li>
my tab
</li>
</ul>
Here follows a minimalist example of a tab style:
.tabs a { // represents the tabs
border: 1px solid #000;
}
.tabs a.active { // represents the active tabs
background: #f00;
}
Next step is creating a script to handle the clicks on the tabs. We want the script to remove the class .active from every other tabs and assign it to the tab that just got clicked. For that we can create an script that looks like:
$('.tabs').on('click', 'a', function () {
var $this = $(this), $ul = $this.parents('ul');
$ul.find('a').removeClass('active');
$this.addClass('active');
});
Example
$('.tabs').on('click', 'a', function() {
var $this = $(this),
$ul = $this.parents('ul');
$ul.find('a').removeClass('active');
$this.addClass('active');
});
body {
margin: 25px;
}
ul.tabs {
margin: 0 0 30px 0;
padding: 0;
list-style: none;
}
ul.tabs li {
display: inline-block;
}
ul.tabs li a {
margin: 0 2px;
padding: 5px 10px;
box-shadow: 0 0 4px rgba(0, 0, 0, .4);
text-decoration: none;
background: #eee;
color: #888;
text-transform: uppercase;
border-radius: 4px;
}
ul.tabs li a:hover {
box-shadow: 0 0 4px rgba(0, 0, 0, .4), 0 0 8px rgba(0, 0, 0, .8);
}
ul.tabs li a.active {
background: #aaa;
color: #fff;
}
<ul class="tabs">
<li>
tab 1
</li>
<li>
<a class="active" href="javascript:void(0)">tab 2</a>
</li>
<li>
tab 3
</li>
<li>
tab 4
</li>
<li>
tab 5
</li>
</ul>
<ul class="tabs">
<li>
tab 1
</li>
<li>
<a class="active" href="javascript:void(0)">tab 2</a>
</li>
<li>
tab 3
</li>
<li>
tab 4
</li>
<li>
tab 5
</li>
</ul>
<ul class="tabs">
<li>
tab 1
</li>
<li>
<a class="active" href="javascript:void(0)">tab 2</a>
</li>
<li>
tab 3
</li>
<li>
tab 4
</li>
<li>
tab 5
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Ok so lets cover css first
If you want link be active by default just modify it to
<ul class="navigation">
<li class="link">Tab1</li>
<li class="link">Tab2</li>
<li class="link">Tab3</li>
and then style it with css
.active { your css }
And then you can handle rest via JS , use .find to select element only in navigation and .addClass and .removeClass to change a to active
$(".navigation a").click(function() {
$(".navigation").find('a').removeClass('active');
$(this).addClass('active');
});
jQuery selection strings use the same syntax as CSS. Therefore to select only anchor tags that are children of navigation, you can use descendent selectors.
$('.navigation a')
And for your CSS issue, no need to use the :active selector. Simply add or remove classes to your target element.
$('.navigation a').click(function () {
// make tabs default color
$('.navigation a').removeclass('fancy-colors')
// make clicked tab fancy
$(this).addClass('fancy-colors')
})
Check out the jQuery toggleclass docs http://api.jquery.com/toggleclass/
Setting default on page load simply means adding your class in the markup.
<a class="fancy-colors">

i want to create a little drop down div on my hompage. when a button is clicked it show the drop down when clicked it goes

I want to create a button that when clicked will show will show a little drop down menu on the side like this one here: http://postimg.org/image/re433fr2l/ this the code that i already have:
HTML
<body background="http://s14.postimg.org/rpo7dneox/NEWW.png/>
<div class="div3">
<UL>
<LI>HOME</LI>
<LI>ARTICLES</LI>
<LI>CONTACT </LI>
<UL>
<div>
CSS:
ul{
font-family: impact;
font-size: 90px;
list-style: none;
}
.div3{
float:right;
width:300px;
height:300px;
border:0px solid cyan;
margin-top: 50px;
margin-left: 570px;
}
a {
color:green;
}
a:hover{
color:orange;
font-size: 100px;
}
You are looking for something like this: http://jsfiddle.net/Ltbodn0j/
$(document).ready(function () {
$(".menu-toggle > button").click(function() {
$(".menu-toggle > ul").toggle();
});
});
Which translates to: if a user clicks the button -> toggle (show/hide) the list.
However, this is a very basic question so I advise you to follow an introductory tutorial on JavaScript and jQuery rather than simply copy-pasting my answer.

Using jQuery's tabify to create tab menu in website (HTML+CSS)

I'm trying to implement a tab navigation menu.
I found this fiddle example http://jsfiddle.net/S78Bt/3/ doing exactly what I want to do. However, I can't get the tabify to work.
Programmatically change tab using tabify jquery plugin
In the above question, I found the tabify function is not being maintained, so instead we have to type it out, I reckon I made a mistake in completely attaching the JS with my webpage since the buttons (tabs) don't respond at all.
Here's my code:
JS script:
<script>
(function(a){a.fn.extend({tabify:function(e){function c(b){hash=a(b).find("a").attr("href");return hash=hash.substring(0,hash.length-4)}function f(b){a(b).addClass("active");a(c(b)).show();a(b).siblings("li").each(function(){a(this).removeClass("active");a(c(this)).hide()})}return this.each(function(){function b(){location.hash&&a(d).find("a[href="+location.hash+"]").length>0&&f(a(d).find("a[href="+location.hash+"]").parent())}var d=this,g={ul:a(d)};a(this).find("li a").each(function(){a(this).attr("href", a(this).attr("href")+"-tab")});location.hash&&b();setInterval(b,100);a(this).find("li").each(function(){a(this).hasClass("active")?a(c(this)).show():a(c(this)).hide()});e&&e(g)})}})})(jQuery);
$(document).ready(function(){
function getHref(el){
hash = $(el).find('a').attr('href');
hash = hash.substring(0,hash.length-4);
return hash;
}
function setActive(el){
$(el).addClass('active');
$(getHref(el)).show();
$(el).siblings('li').each(function(){
$(this).removeClass('active');
$(getHref(this)).hide();
});
}
$('#ulaa').tabify();
setActive($('#target'));
});
</script>
And here's the UL that I'm trying to put in tabs:
<ul id="ulaa">
<li class="active">abcd</li>
<li id="target" >asdbk</li>
<li>texte</li>
<li>foo</li>
<li>inserttexthere</li>
</ul>
<div class="contenta" id="a">
jQuery is a cross-browser…
</div>
<div class="contenta" id="bb">
The Prototype JavaScript…
</div>
<div class="contenta" id="c">
Ext (X-t) is a JavaScript…
</div>
That's it. I have all this in just the one HTML file. Is there something more I need to do?
Basically, on clicking a tab the link's class should change to 'active' and the previous one that already has 'active' should be removed (made class-less)
and then underneath the horizontal tabs a div should be shown corresponding to the ID and the href.
What's wrong with this code?
I put the following code in a page and uploaded it to my website and works exactly the way the fiddle works.
If you don't include jQuery in your header, you'll get a page that looks like yours.
CODE
<!DOCTYPE html>
<head>
<title>Limerick OneLimerick TwoLimerick</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
body { font: 0.8em Arial, sans-serif; }
.menu { padding: 0; clear: both; }
.menu li { display: inline; }
.menu li a { background: #ccf; padding: 10px; float:left; border-right: 1px solid #ccf; border-bottom: none; text-decoration: none; color: #000; font-weight: bold;}
.menu li.active a {
background: #eef;
}
.content { float: left; clear: both; border: 1px solid #ccf; border-top: none; border-left: none; background: #eef; padding: 10px 20px 20px; width: 400px; }
</style>
</head>
<body>
<div class='mytabs'>
<ul id="menu" class="menu">
<li>Limerick One</li>
<li>Limerick Two</li>
<li>Limerick Three</li>
</ul>
<div id="description" class="content">
<h2>Limerick One</h2>
<p>
The limerick packs laughs anatomical
In space that is quite economical,
But the good ones I've seen
So seldom are clean,
And the clean ones so seldom are comical.
</p>
</div>
<div id="usage" class="content">
<h2>Limerick Two</h2>
<p>
Let my viciousness be emptied,
Desire and lust banished,
Charity and patience,
Humility and obedience,
And all the virtues increased.
</p>
</div>
<div id="download" class="content">
<h2>Limerick Three</h2>
Hickere, Dickere Dock,
A Mouse ran up the Clock,
The Clock Struck One,
The Mouse fell down,
And Hickere Dickere Dock.
</div>
</div>
<script>
$('.mytabs').tabs()
$( '.menu li a' ).on('click', function(){
$( '.menu li a' ).css('background-color', '#ccf');
$( this ).css('background-color', 'green');
});
</script>
</body>
</html>

How to open a jquery tab from a link that is outside the tab?

I have found a nice tabs system (link to the tab system) on the internet to let the users navigate through my website. However I am not that good in coding. I have somehow managed to get things working.
I am trying/ tweaking for two days to get it working. Recording to this code I would be able to make a link that will open a specified tab. How could you make a link that -when clicked on it- would open the specified tab.
This code will do the trick but do not know how to implement this code in my existing Javascript code.
CODE:
var $tabs = $('#example').tabs(); // first tab selected
$('#my-text-link').click(function() { // bind click event to link
$tabs.tabs('select', 2); // switch to third tab
return false;
});
Found this code at this website
HTML CODE:
<div id="tabs">
<ul>
<li><a class="active" href="#tab1">HOME</a></li>
<li>SERVICES</li>
<li>OPTIONS</li>
<li>ABOUT US</li>
<li>CONTACT US</li>
</ul><!-- //Tab buttons -->
<div class="tabDetails">
<div id="tab1" class="tabContents">
<h1>Title1</h1>
<iframe src="Home.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
</div><!-- //tab1 -->
<div id="tab2" class="tabContents">
<h1>Title2 </h1>
<h2> </h2>
<h3> </h3>
<iframe src="Services.html" width="1150" height="640" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
</div><!-- //tab2 -->
<div id="tab3" class="tabContents">
<h1>Title3</h1>
<iframe src="Options.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
</div><!-- //tab3 -->
<div id="tab4" class="tabContents">
<h1>Title4 </h1>
<iframe src="Aboutus.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
</div><!-- //tab4 -->
<div id="tab5" class="tabContents">
<h1>Title5</h1>
<iframe src="Contactus.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
</div><!-- //tab5 -->
</div><!-- //tab Details -->
</div><!-- //Tab Container -->
CSS:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Tab</title>
<style type="text/css">
*{margin:10; padding:0;}
body{
font:normal 14px/1.5em Arial, Helvetica, sans-serif;
}
a{outline:none;}
#tabs{
background:#f0f0f0;
border:1x solid #fff;
margin:100px auto;
padding:20px;
position:absolute;
width:1315px;
}
#tabs ul{
overflow:hidden;
border-left:0px solid #fff;
height:80px;
position:center;
z-index:100;
}
#tabContaier li{
float:left;
list-style:none;
}
#tabs li a{
background:#ddd;
border:3px solid #ffff;
border-left:0;
color:#666;
cursor:pointer;
display:block;
height:35px;
line-height:35px;
padding:0 98px;
text-decoration:none;
text-transform:bold;
}
#tabs li a:hover{
background:#fff;
}
#tabs li a.active{
background:#fbfbfb;
border:px solid #fff;
border-right:px;
color:#333;
}
.tabDetails{
background:#fbfbfb;
border:1px solid #fff;
margin:34px px;
}
.tabContents{
padding:px
}
.tabContents h1{
font:normal 24px/1.1em Georgia, "Times New Roman", Times, serif;
padding:0 0 px;
width:auto;
</style>
JAVASCRIPT CODE:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$( ".selector" ).tabs( "refresh" );
// Hide all tab conten divs by default
$(".tabContents").hide();
// Show the first div of tab content by default
$(".tabContents:first").show();
//Fire the click event
$("#tabContaier ul li a").click(function(){
// Catch the click link
var activeTab = $(this).attr("href");
// Remove pre-highlighted link
$("#tabContaier ul li a").removeClass("active");
// set clicked link to highlight state
$(this).addClass("active");
// hide currently visible tab content div
$(".tabContents").hide();
// show the target tab content div by matching clicked link.
$(activeTab).fadeIn();
return false;
});
});
</script>
Your problem was you were selecting the tab with a different jquery tab. Use this Javascript function to change the selected tab.
function selectTab(tabIndex) {
var selector = "a[href='#tab" + tabIndex + "']";
var tab = "#tab" + tabIndex;
$("#tabContaier ul li a").removeClass("active");
$(selector).addClass("active");
$(".tabContents").hide();
$(tab).fadeIn();
}
Link:
<a href="#" onclick="selectTab(2);" >Go to tab 2</a>
This will work if you use the same link nomenclature as you are using now (href for links as "tab1, tab2" etc, and the divs named "tab1, tab2" etc...
Good luck.
It looks like you're over-complicating this and trying to recreate the actions of the JQuery UI tabs. You can eliminate all but the inital tabs creation and the click event. The only part of the other JS you have posted that might actually do anything is the fadeIn() As for styling, don't assign and remove the active class, use the .ui-tabs-active class. Style the background color of the li, not the a or your a style will override the li.ui-tabs-active and they will stay grey even on hover/selection. See example here:
See fiddle demo here: http://jsfiddle.net/webchemist/Dpg2W/
Also you have some CSS errors:
#tabs li a.active{
background:#fbfbfb;
border:px solid #fff;
border-right:px; /*no numeric value given for # of pixels*/
color:#333;
}
.tabDetails{
background:#fbfbfb;
border:1px solid #fff;
margin:34px px; /*no numeric value given for # of pixels in 2nd value*/
}
.tabContents{
padding:px /*no numeric value given for # of pixels*/
}
.tabContents h1{
font:normal 24px/1.1em Georgia, "Times New Roman", Times, serif;
padding:0 0 px;
width:auto;
/*no closing brace for .tabContents h1*/
</style>

Categories