Jquery Move custom tabs to next - javascript

i have some basic html/css tabs and i want want to move tab to next by clicking a link at bottom of every tab.
HTML
<ul class="tabs">
<li class="active">
Explainer (2mins)
<div class="content">
<div id="Video" class="tabcontent">
<div class="coltab">
content A
</div>
<h4>Next tab: View Some Sample Lessons</h4>
</div>
</div>
</div>
</li>
<li>
Sample Lessons
<div class="content coltab">
<div>
Content B
</div>
<h4> Next tab: See the Your Offer. </h4>
</div>
</li>
</ul>
Jquery for this is
$(document).ready(function(){
$(".tabs").after("<div class='tabContent'></div>");
$(".tabs li>a").on("click", function(e){
var $tab = $(this).parent();
var tabIndex = $tab.index();
$tab.parent("ul").find("li").removeClass("active");
$tab.addClass("active");
var tabContent = $tab.find(">div").clone(true);
$(".tabContent").html(tabContent);
e.preventDefault();
});
});
it is working fine for me now as i click on tab its changes.
Live demo
$(document).ready(function(){
$(".tabs").after("<div class='tabContent'></div>");
$(".tabs li>a").on("click", function(e){
var $tab = $(this).parent();
var tabIndex = $tab.index();
$tab.parent("ul").find("li").removeClass("active");
$tab.addClass("active");
var tabContent = $tab.find(">div").clone(true);
$(".tabContent").html(tabContent);
e.preventDefault();
});
});
.coltab{
height: 51vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.tabs {
margin: 0;
padding: 0;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
overflow: hidden;
display: table;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
.tabs li {
display: table-cell;
margin: 0;
padding: 0;
list-style: none;
border-right: 1px solid #000;
}
.tabs li>a {
display: block;
font-weight: bold;
text-align: center;
padding: 5px;
}
.tabs li>a:hover,.tabs li.active a {
background-color: #D3D3D3;
}
.tabs li .content {
display: none;
}
.tabContent {
padding: 15px 15px 0px 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tabs">
<li class="active">
Explainer (2mins)
<div class="content">
<div id="Video" class="tabcontent">
<div class="coltab">
content A
</div>
<h4>Next tab: View Some Sample Lessons</h4>
</div>
</div>
</div>
</li>
<li>
Sample Lessons
<div class="content coltab">
<div>
Content B
</div>
<h4> Next tab: See the Your Offer. </h4>
</div>
</li>
<li>
Special Offer
<div class="content">
<div class="coltab">
Content C
</div>
<h4>Next tab: To Register and Subscribe>>></h4>
</div>
</div>
</li>
<li>
Subscribe
<div class="content coltab">
<div>
Content D
</div>
<div>
<h4>Next tab: To Request a callback</h4>
</div>
</div>
</li>
<li>
Request a Callback
<div class="content coltab">
<div>
Content E
</div>
<h4>Next tab: Reviews</h4>
</div>
</div>
</div>
</li>
<li>
Reviews
<div class="content">
<div>
Content F
</div>
<h4>Back to first tab</h4>
</div>
</div>
</div>
</li>
</ul>

You can add this code:
$("h4").click(function(){
var activeTab = $("ul.tabs > li.active");
var nextTab = (activeTab.is(':last-child') == true ? $("ul.tabs > li:first") : $("ul.tabs > li.active").next("li"));
nextTab.find("a").trigger("click")
});
it will allow you to click on the h4 aka next and move to the next content
Working demo
$(document).ready(function(){
$(".tabs").after("<div class='tabContent'></div>");
$(".tabs li>a").on("click", function(e){
var $tab = $(this).parent();
var tabIndex = $tab.index();
$tab.parent("ul").find("li").removeClass("active");
$tab.addClass("active");
var tabContent = $tab.find(">div").clone(true);
$(".tabContent").html(tabContent);
e.preventDefault();
});
$("h4").click(function(){
var activeTab = $("ul.tabs > li.active");
var nextTab = (activeTab.is(':last-child') == true ? $("ul.tabs > li:first") : $("ul.tabs > li.active").next("li"));
nextTab.find("a").trigger("click")
});
});
.coltab{
height: 51vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.tabs {
margin: 0;
padding: 0;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
overflow: hidden;
display: table;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
.tabs li {
display: table-cell;
margin: 0;
padding: 0;
list-style: none;
border-right: 1px solid #000;
}
.tabs li>a {
display: block;
font-weight: bold;
text-align: center;
padding: 5px;
}
.tabs li>a:hover,.tabs li.active a {
background-color: #D3D3D3;
}
.tabs li .content {
display: none;
}
.tabContent {
padding: 15px 15px 0px 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tabs">
<li class="active">
Explainer (2mins)
<div class="content">
<div id="Video" class="tabcontent">
<div class="coltab">
content A
</div>
<h4>Next tab: View Some Sample Lessons</h4>
</div>
</div>
</div>
</li>
<li>
Sample Lessons
<div class="content coltab">
<div>
Content B
</div>
<h4> Next tab: See the Your Offer. </h4>
</div>
</li>
<li>
Special Offer
<div class="content">
<div class="coltab">
Content C
</div>
<h4>Next tab: To Register and Subscribe>>></h4>
</div>
</div>
</li>
<li>
Subscribe
<div class="content coltab">
<div>
Content D
</div>
<div>
<h4>Next tab: To Request a callback</h4>
</div>
</div>
</li>
<li>
Request a Callback
<div class="content coltab">
<div>
Content E
</div>
<h4>Next tab: Reviews</h4>
</div>
</div>
</div>
</li>
<li>
Reviews
<div class="content">
<div>
Content F
</div>
<h4>Back to first tab</h4>
</div>
</div>
</div>
</li>
</ul>

Related

display div when clicking a button that has the same parent div

I want to have a div that is displayed when I click a button.
Right now I am only able to display something that is within the button I will click, like so:
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
if (current.length > 0) {
current[0].className = current[0].className.replace(" active", "");
}
this.className += " active";
});
}
.mainmenu {
display: block;
width: 100% !important;
background: red;
height: auto;
}
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
height: auto;
widht: 100%;
}
/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
background-color: #666;
color: #fff;
}
.submenu > p {
display: none;
background: green;
}
.active p {
display: block;
}
<div id="myDIV">
<div class="mainmenu">
<button class="btn">1
<div class="submenu">
<p> TEST1</p>
</div>
</button>
</div>
<div class="mainmenu">
<button class="btn">2 <div class="submenu">
<p> TEST2</p>
</div></button>
</div>
<div class="mainmenu">
<button class="btn">3 <div class="submenu">
<p> TEST3</p>
</div></button>
</div>
<div class="mainmenu">
<button class="btn">4 <div class="submenu">
<p> TEST4</p>
</div></button>
</div>
<div class="mainmenu">
<button class="btn">5 <div class="submenu">
<p> TEST5</p>
</div></button> </div>
</div>
If I move the div I want to display out of the button, I know that I have to adjust the javascript code to still display the div which is now not in the button anymore. unfortunately I don't know how.
So I am basically trying to display the div (which is working in the first jsfiddle) when clicking a button, but now I want to move the div out of the button. (which I tried in the second jsfiddle)
When I moved the div out of the button the code is not working. I am sure that there is a problem with my javascript but I don't know how to fix that.
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
if (current.length > 0) {
current[0].className = current[0].className.replace(" active", "");
}
this.className += " active";
});
}
.mainmenu {
display: block;
width: 100% !important;
background: red;
height: auto;
}
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
height: auto;
widht: 100%;
}
/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
background-color: #666;
color: #fff;
}
.submenu > p {
display: none;
background: green;
}
.active p {
display: block;
}
<div id="myDIV">
<div class="mainmenu">
<button class="btn">1 </button>
<div class="submenu">
<p> TEST1</p>
</div>
</div>
<div class="mainmenu">
<button class="btn">2</button> <div class="submenu">
<p> TEST2</p>
</div>
</div>
<div class="mainmenu">
<button class="btn">3</button> <div class="submenu">
<p> TEST3</p>
</div>
</div>
<div class="mainmenu">
<button class="btn">4</button> <div class="submenu">
<p> TEST4</p>
</div>
</div>
<div class="mainmenu">
<button class="btn">5</button> <div class="submenu">
<p> TEST5</p>
</div> </div>
</div>
Is it possible to do this and even align the buttons to the right but the div to the left?
Selecting the <p> tag in the CSS is wrong, as you have now moved the div outside so you have to select that like,
.active + .submenu p {
....
}
+ means the element immediately after the specified element but not
inside the particular elements.
Here is your updated code,
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
if (current.length > 0) {
current[0].className = current[0].className.replace(" active", "");
}
this.className += " active";
});
}
.mainmenu {
display: block;
width: 100% !important;
background: red;
height: auto;
}
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
font-size: 18px;
height: auto;
widht: 100%;
}
/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
background-color: #666;
color: #fff;
}
.submenu > p {
display: none;
background: green;
}
.active + .submenu p {
display: block;
}
<div id="myDIV">
<div class="mainmenu">
<button class="btn">1 </button>
<div class="submenu">
<p> TEST1</p>
</div>
</div>
<div class="mainmenu">
<button class="btn">2</button> <div class="submenu">
<p> TEST2</p>
</div>
</div>
<div class="mainmenu">
<button class="btn">3</button> <div class="submenu">
<p> TEST3</p>
</div>
</div>
<div class="mainmenu">
<button class="btn">4</button> <div class="submenu">
<p> TEST4</p>
</div>
</div>
<div class="mainmenu">
<button class="btn">5</button> <div class="submenu">
<p> TEST5</p>
</div> </div>
</div>

Get child div content if class exists on parent

I have a module where, on hover, I want the content on the right to change (stuff in the blue div in the demo below).
To achieve this, what I'm trying to do is:
If class .active exists on li.tabs then, get the .content from it and display it in the .overview div.
But unsure on how I can get .content when class .active exists in .overview?
I have the following markup (simplified):
// 1. Check if li has class active
if ($('li.tabs').hasClass('active')) {
// 2. get .content div from li where class .active exists
}
.tabs{
border: 1px solid yellow;
}
.list {
border: 1px solid red;
flex-basis: 40%;
}
.list li {
list-style-type: none;
}
.overview {
border: 1px solid blue;
-ms-flex-preferred-size: 60%;
flex-basis: 60%;
}
<script type='text/javascript' src='https://code.jquery.com/jquery-3.4.1.min.js?ver=3.4.1'></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="d-flex flex-row">
<div class="list">
<li class="tabs active">
<div class="header"><span>Header</span></div>
<div class="content d-none"><p>content</p></div>
</li>
<li class="tabs">
<div class="header"><span>Header 2</span></div>
<div class="content d-none"><p>content 2</p></div>
</li>
</div>
<div class="overview"> </div>
</div>
Complete code for your, together with active class toggle:
var overview = $('.overview');
$('.tabs').each(function(i) {
var thisTab = $(this);
var thisContent = thisTab.find('.content').html();
thisTab.on('mouseenter', function(e) {
thisTab.addClass('active');
overview.html(thisContent);
}).on('mouseleave', function(e) {
thisTab.removeClass('active');
overview.html('');
});
});
.tabs {
border: 1px solid yellow;
}
.tabs.active {
background: none yellow;
}
.list {
border: 1px solid red;
flex-basis: 40%;
}
.list li {
list-style-type: none;
}
.overview {
border: 1px solid blue;
-ms-flex-preferred-size: 60%;
flex-basis: 60%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex flex-row">
<div class="list">
<li class="tabs">
<div class="header"><span>Header</span></div>
<div class="content d-none">
<p>Content 1</p>
</div>
</li>
<li class="tabs">
<div class="header"><span>Header 2</span></div>
<div class="content d-none">
<p>Content 2</p>
</div>
</li>
</div>
<div class="overview"> </div>
</div>
Also on JSFiddle
You can select a children by letting a space between the selectors (in JQuery):
$(".li.tabs.active .content")
will select all the content whom parents have the active class

Moving tab is not working after some seconds on next button click

I have three tabs which add or remove active class on anchor tag not li when click on next button.
I tried that when I click on next button its disabled for some seconds then move to next tab button but issue is that moving is not working.
Here is code of html
<ul class="nav nav-pills" style="width: 1050px">
<li class="nav-item"><a class="active" href="#Race" data-toggle="tab">Race</a>
</li>
<li class="nav-item"><a class="active" href="#Ace" data-toggle="tab">Ace</a>
</li>
<li class="nav-item"><a class="active" href="#Deep" data-toggle="tab">Deep</a>
</li>
</ul>
<div class="tab-content">
<!-- Race -->
<div class="tab-pane active" id="Race">
<button class="btn-style" type="submit">Next</button>
</div>
<!-- ACE -->
<div class="tab-pane" id="Ace">
<button class="btn-style" type="submit">Next</button>
</div>
and jquery code
$(".btn-style").click(function () {
$(".btn-style").prop("disabled", true );
setTimeout(function() {
$(".btn-style").prop("disabled", false );
var target = $(".nav-pills li.nav-item a.active");
var sibbling;
if ($(this).text() === "Next") {
sibbling = target.next();
} else {
//sibbling = target.prev();
}
if (sibbling.is("li")) {
target.removeClass("active")
sibbling.addClass("active").children("a").tab("show");
}
}, 3000);
});
Target will be an array since there is more than 1 anchor with an active class.
You can try something easier like this CodePen
<style>
/* Checked Tabs */
.tabs-checked input:nth-of-type(1):checked ~ .tab:nth-of-type(1),
.tabs-checked input:nth-of-type(2):checked ~ .tab:nth-of-type(2),
.tabs-checked input:nth-of-type(3):checked ~ .tab:nth-of-type(3)
{
display: block;
}
.tab-area {
width: 21%;
margin: 2%;
}
input {
display: none;
}
.tab {
clear: both;
background: #ddd;
padding: 25px;
display: none;
height: 180px;
border: 1px solid #bbb;
}
.tab-link:focus,
.tab-link:hover,
#tab-C:checked ~ label:nth-of-type(3),
#tab-B:checked ~ label:nth-of-type(2),
#tab-B:not(:checked) ~ #tab-C:not(:checked) ~ label:nth-of-type(1) {
background: #ddd;
}
.tab-link:focus:after,
.tab-link:hover:after,
#tab-C:checked ~ label:nth-of-type(3):after,
#tab-B:checked ~ label:nth-of-type(2):after,
#tab-B:not(:checked) ~ #tab-C:not(:checked) ~ label:nth-of-type(1):after {
position: absolute;
content: "";
margin: 5px 0 0 0;
width: 55px;
height: 1px;
display: block;
background: #ddd;
}
.tab-link {
text-transform: uppercase;
font-size: 10px;
cursor: pointer;
color: #555;
font-weight: bold;
text-decoration: none;
display: block;
float: left;
width: 55px;
padding: 5px 0;
text-align: center;
background: #ccc;
border: 1px solid #bbb;
border-left: 0;
border-bottom: 0;
}
.tab-link:hover {
background: #eee;
color: #666;
}
.tab-link:nth-of-type(1) {
border-left: 1px solid #bbb;
}
</style>
<form class="tab-area tabs-checked" name="temp">
<input checked type="radio" name="tab" id="tab-A" value="1"/>
<input type="radio" name="tab" id="tab-B" value="2"/>
<input type="radio" name="tab" id="tab-C" value="3"/>
<label class="tab-link" for="tab-A">Tab 1</label>
<label class="tab-link" for="tab-B">Tab 2</label>
<label class="tab-link" for="tab-C">Tab 3</label>
<article class="tab">
<h3>I love :checked. :checked is great. If only I could toggle any item and not just input elements we'd be golden.</h3>
</article>
<article class="tab">
<h3>Tab 2</h3>
<p>Lorem Ipsum Dolor Sit</p>
</article>
<article class="tab">
<h3>Tab 3</h3>
<p>Lorem Ipsum Dolor Sit</p>
</article>
<h2 class="title">Checked Tabs</h2>
<p><strong>Independent, Default Selected</strong></p>
<p>Works In: Chrome(latest), Opera(Latest), FireFox(Latest), IE9</p>
</form>
<div >
<button onclick="doNext();" id="btn">NEXT</button>
</div>
<script>
function doNext()
{
btn.disabled = true;
setTimeout(function()
{
document.temp.tab.value = document.temp.tab.value % 3 + 1;
btn.disabled = false;
},3000)
}
</script>

Switch visible div based on user click

so I have a div with navigational links (set up using ul/li and a href within the li's).
Below that I have 4 other div's. I only want 1 div shown at a time, they will then switch based on the users selection of the navigational LI's
I've used a similar setup on a different page, and have tried to port it over to my current page but to no avail...
JSFIDDLE
Please see the above jsfiddle for the HTML/CSS/JS involved.
HTML:
<div id="content">
<div class="man-banner"></div>
<div class="banner-nav" id="tabs">
<ul class="tabs" style="padding-left: 0px">
<li class="active"><span>Home</span></li>
<li><span>Find Your Vehicle</span></li>
<li><span>Downloads</span></li>
<li><span>Support</span></li>
</ul>
</div>
<div id="tab-content">
<div id="home" class="tab_content">
1234156124
</div>
<div id="findvehicle" class="tab_content">
abasdjfniasjfnasdf
</div>
<div id="downloads" class="tab_content">
asdfniadhnfiasdn890384834854854jnrjrjr
</div>
<div id="support" class="tab_content">
asdfniadhTHIS IS SUPPORT
</div>
</div>
</div>
Any help is welcomed, I am still learning (aren't we always), so with any fixes/tips, please detail why it works, or what i did wrong that's making this not work. (if that makes sense!)
Thanks again for your help!
This is one way of achieving it.
HTML - added "navlink" class to your anchor elements, and gave them a data-section attribute that refers to the tab they should show:
<div id="content">
<div class="banner-nav" id="tabs">
<ul class="tabs" style="padding-left: 0px">
<li><span>Home</span></li>
<li><span>Find Your Vehicle</span></li>
<li><span>Downloads</span></li>
<li><a data-section="support" href="#support" rel="support"><span>Support</span></a></li>
</ul>
</div>
<div id="tab-content">
<div id="home" class="tab_content">
1234156124
</div>
<div id="findvehicle" class="tab_content">
abasdjfniasjfnasdf
</div>
<div id="downloads" class="tab_content">
asdfniadhnfiasdn890384834854854jnrjrjr
</div>
<div id="support" class="tab_content">
asdfniadhTHIS IS SUPPORT
</div>
</div>
</div>
JavaScript - see inline comments:
$(document).ready(function(){
// start of at the home page
navigateTo("#home");
// for every navlink element
$('.tabs > li > a').each(function() {
//when it is clicked
$(this).click(function(e) {
e.preventDefault();
// navigate to the section ilinked to in the href
navigateTo($(this).attr('href'));
});
});
});
function navigateTo(sectionId) {
//hide all tabs
$('.tab_content').hide();
//then show the one we want
$(sectionId).show();
}
You don't need separate click handlers for each menu item. The #tabs li click handler will suffice. I removed the click handlers on each of the links since they are not necessary.
$("#tabs li").click(function() {
// First remove class "active" from currently active tab
$("#tabs li").removeClass('active selected');
// Now add class "active" to the selected/clicked tab
$(this).addClass("active selected");
// Hide all tab content
$(".tab_content").hide();
// Here we get the href value of the selected tab
var selected_tab = $(this).find("a").attr("href");
// Show the selected tab content
$(selected_tab).fadeIn(0);
// At the end, we add return false so that the click on the link is not executed
return false;
});
ul {
list-style: none;
}
.man-banner {
background: url("../images/man-logo.png") no-repeat top;
border-radius: 8px 8px 0 0;
height: 93px;
max-width: 915px;
margin: 15px 15px 0 15px;
}
.banner-nav {
background: #F0F1F2;
border-bottom: 1px solid #D6D8DB;
height: 40px;
max-width: 915px;
margin: 0 15px 15px;
}
.banner-nav a {
font-family: MAN-light, Arial, sans-serif;
font-size: 16px;
margin-left: 20px;
text-decoration: none;
display: block;
float: left;
height: 40px;
position: relative;
color: #303C49;
line-height: 40px;
}
.banner-nav a:hover {
color: #303C49;
}
.banner-nav a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 5;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.banner-nav a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
ul.tabs li.selected a,
ul.tabs li.selected a:hover {
top: 0px;
font-weight: normal;
background: #FFF;
border-bottom: 1px solid #FFF;
color: #000;
}
/***************************/
/** Main Content Area **/
/***************************/
#content {
width: 950px;
margin: 5 10;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div class="man-banner"></div>
<div class="banner-nav" id="tabs">
<ul class="tabs" style="padding-left: 0px">
<li class="active"><a data-tab-id="#home"><span>Home</span></a>
</li>
<li><span>Find Your Vehicle</span>
</li>
<li><span>Downloads</span>
</li>
<li><span>Support</span>
</li>
</ul>
</div>
<div id="tab-content">
<div id="home" class="tab_content">
1234156124
</div>
<div id="findvehicle" class="tab_content">
abasdjfniasjfnasdf
</div>
<div id="downloads" class="tab_content">
asdfniadhnfiasdn890384834854854jnrjrjr
</div>
<div id="support" class="tab_content">
asdfniadhTHIS IS SUPPORT
</div>
</div>
</div>
You can try to use css to show and hide the blocks when there is an onclick event.
Here some sample code:
CSS
.activetab {
display: block;
}
.tab {
display: none;
}
JAVASCRIPT / JQUERY
$(document).ready(function() {
$(".tabmenu").on("click", function() {
$(".activetab").removeClass("activetab");
$(this).addClass("activetab");
});
});
HTML
<div id="content">
<div class="man-banner"></div>
<div class="banner-nav" id="tabs">
<ul class="tabs" style="padding-left: 0px">
<li class="active tabmenu"><span>Home</span></li>
<li class="tabmenu"><span>Find Your Vehicle</span></li>
<li class="tabmenu"><span>Downloads</span></li>
<li class="tabmenu"><span>Support</span></li>
</ul>
</div>
<div id="tab-content">
<div id="home" class="tab_content tab">
1234156124
</div>
<div id="findvehicle" class="tab_content tab">
abasdjfniasjfnasdf
</div>
<div id="downloads" class="tab_content tab">
asdfniadhnfiasdn890384834854854jnrjrjr
</div>
<div id="support" class="tab_content tab">
asdfniadhTHIS IS SUPPORT
</div>
</div>
</div>
If you want I can create a JSFiddle to see how it works
Hope this works for you!
You have a syntax error, you are closing your document ready callback more than once.
$("#findvehicle").click(function(){
$('a[rel="find_your_vehicle"]').trigger("click");
});
}); // Remove this
$("#downloads").click(function(){
$('a[rel="downloads"]').trigger("click");
});
}); // Remove this
When you remove these extra closes the tabs appear. You'll probably want to hide all but the default tab in that document ready call also.

Why doesn't the menu background color change?

I have created 2 menus:prod & prod2, I find when the mouse focus on prod2, the background color is changed but when the mouse focus on prod1 the background color doesn't change.
Why it doesn't change?
Styles:
ul.hMenu {
margin: 0;
padding: 0;
z-index: 1;
}
ul.hMenu > li {
margin: 0;
padding: 0;
list-style: none;
float: left;
width:140px;
}
ul.hMenu li a {
display: block;
text-align: left;
text-decoration: none
}
ul.hMenu li > div {
position: absolute;
display: none;
}
ul.hMenu div a {background: yellow;
}
div.lay1{ float:left;}
div.lay1 br{line-height:50%}
.topMenu{font:bold 12px arial;color:#169e39;text-decoration: none;}
.secondMenu{font:12px arial;color:#000000;text-decoration: none;}
.arrow_box {
position: relative;
background: red;
border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(149, 213, 53, 0);
border-bottom-color: red;
border-width: 13px;
left: 10%;
margin-left: -13px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 19px;
left: 10%;
margin-left: -19px;
}
Script:
function showMenu(obj){
var a=obj.children[0];
a.style.color="blue";
var div = obj.children[1];
obj.style.backgroundColor="yellow";
div.style.display="block";
}
function hideMenu(obj){
var a=obj.children[0];
a.style.color="red";
var div = obj.children[1];
div.style.display="none";
obj.style.backgroundColor="";
}
HTML:
<ul class="hMenu">
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
<a style="color: red;" href="javascript:void(0);">prod</a>
<div><br/>
<!-- here-->
<div class="arrow_box" >
<div class="lay1">
<div>Manage Content<br> Message </div>
<br><br>
<div>Manage Assignment<br> User Inquiry</div>
</div>
</div>
</div>
</li>
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
<a style="color: red;" href="javascript:void(0);">prod2</a>
<div class="arrow_box">
<div class="lay1">
<div>Manage Content<br> Message <br> Help </div>
<br><br>
<div>Manage Assignment<br> User Inquiry</div>
</div>
</div>
</li>
</ul>
<br/><br/><br/><br/><br/>
Test
Problem In JsFiddle
I tested your code and it worked! what is your browser? please place a demo and also add this code as well
a.setAttribute('style','background-color:blue');
some browsers have incompatibility with element.style
give CSS Like this
.arrow_box{ position:absolute; white-space:nowrap}
Check this
http://jsfiddle.net/zz5XJ/2/
try the below HTML:
<body>
<ul class="hMenu">
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
<a style="color: red;" href="javascript:void(0);">prod</a>
<div class="arrow_box" >
<div class="lay1">
<div>Manage Content<br> Message </div>
<br><br>
<div>Manage Assignment<br> User Inquiry</div>
</div>
</div>
</li>
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
<a style="color: red;" href="javascript:void(0);">prod2</a>
<div class="arrow_box">
<div class="lay1">
<div>Manage Content<br> Message <br> Help </div>
<br><br>
<div>Manage Assignment<br> User Inquiry</div>
</div>
</div>
</li>
</ul>
<br/><br/><br/><br/><br/>
Test
</body>
Please check your HTML :
Because you execute same function for both Pord or Pord2 but the Inner html is different for both li. so function showMenu() works different for both Pord or Pord2:
HTML:
<ul class="hMenu">
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);"><a style="color: red;"
href="javascript:void(0);">prod</a>
<div class="arrow_box">
<br />
<div class="lay1">
<div>
Manage Content<br>
Message
</div>
<br />
<br />
<div>
Manage Assignment<br>
User Inquiry</div>
</div>
</div>
</li>
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);"><a style="color: red;"
href="javascript:void(0);">prod2</a>
<div class="arrow_box">
<br />
<div class="lay1">
<div>
Manage Content<br>
Message
<br>
Help
</div>
<br />
<br />
<div>
Manage Assignment<br>
User Inquiry</div>
</div>
</div>
</li>
</ul>
Try This
UPDATED
Put <br /> before arrow_box div for both li and some change into Javascript:
var div = obj.children[2];
Javascript -
function showMenu(obj){
var a=obj.children[0];
a.style.color="blue";
var div = obj.children[2];
obj.style.backgroundColor="yellow";
div.style.display="block";
}
function hideMenu(obj){
var a=obj.children[0];
a.style.color="red";
var div = obj.children[2];
div.style.display="none";
obj.style.backgroundColor="";
}
Updated Jsfiddle

Categories

Resources