My webpage is at http://sarahjanetrading.com/js/j/index.html
I have done all the layout and coding. I want the tabs to toggle when clicked over them. I tried google but was in vain. I am willing to achieve the effect using either JavaScript or jQuery. My tabs are empty right now, And I want the layout to remain the same.
NEW :
This is my code so far:
<script type="text/javascript">
var lis = $('#main-tabs li');
lis.click( function() {
//Reset all the tabs
lis.removeClass('active-tab').addClass('inactive-tab');
$(this).addClass('active-tab');
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".tab-content").hide();
$("ul#main-tabs li a:first").addClass("active").show();
$("#wrap > div").hide().filter(":first").show();
$("ul.tabs li a").click(function() {
$("ul.tabs li > a").removeClass("active");
$(this).addClass("active");
$("#wrap > div").hide();
var activeTab = $(this).attr("href");
$(activeTab).show();
return false;
});
});
</script>
For the full HTML and JavaSript code (new) please go to http://sarahjanetrading.com/js/j/index.html
What it does is that when I click on a list item, it changes the tab, but not the content. And when I click on the anchor of a list item, it changes the content, but not the tab. I want both the content and the tab to change consistently.
Thanks
jQuery UI is probably the best solution. You can use the .tabs()
to accomplish what you are trying to do. You can also edit the layout easily by using ThemeRoller.
This quick test is working pretty well
var lis = $('#main-tabs li');
lis.click( function() {
//Reset all the tabs
lis.removeClass('active-tab').addClass('inactive-tab');
$(this).addClass('active-tab');
});
Of course it doesn't consider the content of the tabs, but it's a start :)
Related
I have created a side menu bar that menu items has id's 'h1-1', 'h1-2','h1-3' and so on. when first load the page I need to show the 'h1-1' content. so I've written code
$(document).ready(function() {
window.onload = $('#h1-1').show();
});
But here, when I click other menu item first, 'h1-1' content is still show on the page and clicked list item content showing below the 'h1-1' content .
However when I 'h1-1' itself first and then click other list items, it works fine (when I 'h1-1' itself first, 'h1-1' content still showing and then click other list item 'h1-1' content go away and show clicked item content).
I've tried to write hide the 'h1-1' content on the first click but then, 'h1-1' content is not showing even when click the 'h1-1' list item itself.
Can anyone suggest a way how can I solve this..
Fiddle Demo
You are relying on the content of curPage to hide the previous page, but you initialize it to "". Instead, set it to the first page.
var curPage="h1-1";
Updated fiddle
try this... all the codes are there.. I just updated your code.
$(function() {
var curPage="";
$("#menu a").click(function() {
$('#h1-1').hide();
if (curPage.length) {
$("#"+curPage).hide();
}
curPage=$(this).data("page");
$("#"+curPage).show();
});
});
$(document).ready(function() {
window.onload = $('#h1-1').show();
});
http://jsfiddle.net/M3ZhV/454/
I think you are complicating the things. Use a selector to get all elements to hide (jsFiddle).
$(function() {
$('#h1-1').show();
$("#menu a").click(function() {
var curPage = $(this).data("page");
$('.main div.content').hide();
$("#" + curPage).show();
});
});
Just change var curPage=""; to var curPage="h1-1";
$(function() {
var curPage="h1-1";
$("#menu a").click(function() {
if (curPage.length) {
$("#"+curPage).hide();
}
curPage=$(this).data("page");
$("#"+curPage).show();
});
});
$(document).ready(function() {
window.onload = $('#h1-1').show();
});
http://jsfiddle.net/M3ZhV/457/
I have a tabs java scripts, but there is no default page.
I want to open the site to chose a page as a default tab.
Please help me
$(document).ready(function(){
$("#tabs a").on("click", function(e){
e.preventDefault();
var html = $(this).attr('href');
var htmlurl = 'html/'+html;
// update to the newest tab
$("#tabs a").removeClass("active");
$(this).addClass("active");
// set the new page content
$("#content-wrap").hide().load(htmlurl, function(){
$(this).fadeIn(400);
});
});
});
Your problem doesn't seem to be clear to me, hovewer these lines didn't make sense.
// update to the newest tab
$("#tabs a").removeClass("active");
$(this).addClass("active");
In these lines , you refer to $("#tabs a") and remove the class and by using this statement , again you re adding the class.
I'm trying to add jQuery to a website so when the link to the next page in the nav menu is clicked, then "active" class is switched to the "active" or current page. The "active" class is also set initially to the home page. Additionally, it's a website using Bootstrap so I was wondering if something was conflicting with my jQuery. Seems simple enough and my code works somewhat. It removes the active class from the Home page and briefly flashes on the next tab, but it does not stay "active." Here's the jQuery:
$(".nav li").click(function() {
$('li').removeClass('active');
$(this).addClass("active");
});
Any thoughts on what I may be doing wrong? Thanks in advance.
Andrew
I had a similar problem and wrote the following script:
var _urlpath = $(location).attr('pathname').split('/').pop();
$('#menu > li').each(function(){
var _this = $(this);
var _str = _this.find('a').attr('href');
_str !== _urlpath ? _this.removeClass('active') : _this.addClass('active');
});
It's fairly simple: filter the url path name, store it in a variable, and then most importantly, when a new page is loaded, loop through all the li's and try and match the url hash (I don't know the exact terminology), hash in the li > a's .
Alas, there might be a better way of doing this.
So I'm making a website using wordpress: http://www.baxtersresume.com/wordpress-3.9.1/wordpress/about/
I'm playing with the menu jquery to get the right effect and I think I've almost got it but I need a bit of help. If you look at the site you'll notice when you open the bottom submenu by mousing over and then re-enter the menu from the bottom with the pointer it will close. That's what I'm trying to avoid. Here's the script so far:
jQuery(document).ready(function(){
jQuery(".page_item ul, .sub-menu").hide();
var current;
var currentsub;
jQuery(".page_item ul, .sub-menu").prev().mouseenter( function() {
current = jQuery(this);
currentsub = jQuery(this).next();
currentsub.slideDown();
});
/*jQuery(".header__content").mouseleave( function() {
jQuery(".page_item ul, .sub-menu").slideUp();
});*/
jQuery(".menu-item-object-page, .menu-item-has-children").mouseenter( function() {
if (current != jQuery(this) && currentsub != jQuery(this)) {
currentsub.slideUp();
};
});
});
What can I do here?
edit* (Solved! JSfiddle with the html)
http://jsfiddle.net/tu965j0d/1/
Perhaps something like the following would be a starting point for you. Simply using selectors to determine those elements you want to slideUp/slideDown, and exclude children of the target of the mouseEnter event?
$(function () {
$('.sub-menu').hide().parent().mouseenter(function(){
$('.sub-menu').not($(this).find('.sub-menu')).stop(true, true).slideUp();
$(this).find('.sub-menu').slideDown();
});
});
Fiddle: http://jsfiddle.net/tu965j0d/
Edit: There's also a number of accordian menu libraries and tutorials out there, might be useful? For example, this little tutorial using some nice CSS3 transitions.
So I am in the middle of coding a navigation bar for the side of my website and I am creating it so that you click on a li, inside of it is an a tag with no href attribute so that it acts like a button (I don't use # since it jumps to the top of the page and I don't want that)it has a drop down section come out underneath it pushing the other tabs down. What I've found online is
$('li').click(function() {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
or
$('li').click(function() {
$(this).addClass('active').siblings().removeClass('active')
});
(and other variations of this)
However after I tested this out several times, either by adding multiple classes to each li or attempting to change the class active to an id and I've had no luck.
EDIT: It seems like the code works perfectly in other testing websites (codepen/jsfiddle) but it doesn't seem to work in my own browser when I open up the VisualStudio emulator (opens in the actual browser window)
Here's my code that contains this navigation bar: http://codepen.io/PorototypeX/pen/sjDBL
This might help :
$("ul.navbar > li").click(function () {
$("li[.active]").removeClass('active');
$(this).addClass('active');
});
Actually your code is fine, but it seems you are using JQuery, and it's not a native part of JS it self, it utilizes JS. So first you need to load JQuery.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
Then try this code, it's the same but a different variation of what you have done:
$(".navbar > li").click(function () {
$(".navbar").children("li").removeClass("active");
$(this).addClass('active');;
});
JS Fiddle
jQuery not added in the page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
Demo: CodePen
Another problem could be that the code is not in a dom ready handler
jQuery(function () {
$("ul.navbar > li").click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
})
Demo: Fiddle
I figured out what was wrong with my jquery. Although the code would work perfectly on outside sources such as codepen and jsfiddle, the only way that it will work on a local server is to have this code instead:
$(document).ready(function () {
$("ul.navbar > li").click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
});
The $(document).ready(function() { remaining code goes here... }) allows it to run locally.