I have created a simple HTML tab menu with JavaScript that allows for changing 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"><a href="#tab1">Tab1</a></li>
<li><a href="#tab2">Tab2</a></li>
<li><a href="#tab3">Tab3</a></li>
<li><a href="/logout">Logout</a></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; }
In the current setup, clicking on Tab1, Tab2, or Tab3 displays the respective div while hiding others. However, I seek advice on how to handle different actions upon clicking the Logout tab without affecting its appearance like the other tabs. Can the logout tab redirect me to "/logout" instead of behaving like the other tabs?
My Question for now: I want a unique action triggered by clicking the Logout tab without altering its visual style. Is it possible to direct the user to a logout page ("/logout") upon clicking this specific tab while maintaining the tab's appearance as consistent with the rest of the menu?
Thank you!