multiple divs hide show jquery - javascript

Maybe this is not possible, however, i have like 50 unique divs like this:
<div id="nyc_data">
nyc
</div>
<div id="la_data">
la
</div>
<div id="san_data">
san
</div>
etc....
below is my jquery:
jQuery(document).ready(function()
{
var url=document.URL.split('#')[1];
url=url.toLowerCase();
if (url == "nyc_pics")
{
jQuery("#nyc_data").show();
jQuery("#la_data, #san_data").hide();
}
if (url == "la_pics")
{
jQuery("#la_data").show();
jQuery("#nyc_data, #san_data").hide();
}
if()
{
}
etc....
}
When this was 2 it was okay to write it out, but i can't possibly write a long jquery 50 times for each city or so. is there an efficient way to have a simple smaller jquery code?

Select all the divs first, with jQuery selector id ending with '_data' as [id$='_data'] and hide them all. This will hide your desired div as well.
Now get the desired div id from url, find it with jQuery and show.
If your uri is mySite.com/myPage#nyc_pics then var urlHash = document.URL.split('#')[1] will get "nyc_pics". After toLowercase().replace("pics", "data") this will be "nyc_data". Now, jQuery("#" + divToSHow) will be $("#nyc_data"), which will match your div. Then you can show that single div with .show()
jQuery(document).ready(function()
{
var urlHash = document.URL.split('#')[1];
var divToSHow = urlHash .toLowerCase().replace("pics", "data");
jQuery("div[id$='_data']").hide();
jQuery("#" + divToSHow).show();
});

You can use this CSS selector:
jQuery('div[id$="_data"]').show();
In your example:
jQuery(document).ready(function()
{
var url=document.URL.split('#')[1];
url=url.toLowerCase();
var currentId = '#' + url.split('_')[0] + "_data";
jQuery('div[id$="_data"]').hide();
jQuery(currentId).show();
}

It would be much easier/cleaner/faster if you just used jQuery to toggle a class on a parent element and let CSS do the work. Something like this:
window.onload = function() {
$('#all-the-things-btn').on('click', function() {
$('#my-parent-div').toggleClass('show-things');
});
};
#my-parent-div > div {
display: none;
}
#my-parent-div.show-things > div {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Toggle all the things!
<div id="my-parent-div" class="show-things">
<div id="1">stuff</div>
<div id="2">more stuff</div>
<div id="3">even more stuff</div>
</div>

Related

I can't get the animation speed to work

I'm trying to make a menu (with buttons) that open links.
when you hover on the buttons, a slideDown reveals more information on that link.
I've gotten all those features to technically work, however i can't get the animation speed to go any slower than instantly.
I'm really new to javascript and Jquery, and it took me 2-3 days to get the javascript and CSS to do what i have so far... and yeah it's probably bloated... but i'm still proud i got this done so far :D
PS, I know most menus are made w/ul's but I really like the way the buttons look and detested trying to put the list together. last time i tried used a seperate ul for the information and it kept styling the second list like the first because it was inside it... so annoying. I also tried vertical-link list w/CSS but still think flat 'buttons' are so boring. i really like the 3D esk of the actual html
HTML:
<div class="mainmenu">
<div id="homemenu">
<button id="home" class="mmbutton active">Home</button>
<div id="homesub" class="sub active">-just a bit about this page</div>
</div>
<div id="photosmenu">
<button id="photos" class="mmbutton">Photos</button>
<div id="photossub" class="sub inactive">-just a bit about this page
</div>
</div>
</div>
javascript/jquery:
$(function(){
var mmbutton = $('.mmbutton');
var start = "http://";
var address = "[my web address"; //add "http:
var about = "[web address]/aboutme.html";
var id = 0;
var rel = 0;
var mmsub = 0;
//<click link buttons:
$(mmbutton).click(function(){
var id = $(this).attr('id');
if (id === "home") {
location.replace(start+address);
}else if (id === "about") {
window.alert("I'm sorry I don't have this page set up yet. Thank you for visiting my page!");
//add additional buttons here under 'else if' unless its a subdomain
}else {
location.replace(start+id+'.'+address);//goes to any subdomain by id
}});
//>detect hover
$(mmbutton).hover(function(){
id = $(this).attr('id');
rel = '#'+id+'sub';
mmsub = '#'+id+'menu';
console.log('mouseenter'+rel);
$(rel).removeClass('inactive');
$(rel).stop().slideDown(500000);
}, function(){
console.log('mouseleave'+rel);
$(rel).addClass('inactive');
if ( $(this).hasClass('active')) {
$(rel).removeClass('inactive');
console.log('this is active');
}if ($(rel).hasClass('inactive')){
$(rel).stop().slideUp(500000);
}});});
relevante CSS:
.inactive {
display: none;
}
.sub {
transition-duration: 1s;
}
You can do it setting all that info divs to display:none and use slideToggle() function for that. Considering you want to keep the subdiv's opened when you're over them, one option is create a span element that include the button and the subdiv, and apply the hover to that span. So...
HTML:
<div class="mainmenu">
<div id="homemenu">
<span class="subcontainer">
<button id="home" class="mmbutton active">Home</button>
<div id="homesub" class="sub">-just a bit about this page</div>
</span>
</div>
<div id="photosmenu">
<span class="subcontainer">
<button id="photos" class="mmbutton">Photos</button>
<div id="photossub" class="sub">-just a bit about this page</div>
</span>
</div>
</div>
CSS:
.sub {
display: none;
/*transition-duration: 1s; IMPORTANT: REMOVE THIS!!*/
}
JQUERY:
$('span.subcontainer').hover(function() {
$(this).find('div.sub').slideToggle('slow');
});
IMPORTANT: Check that to make it work you have to remove the transition style you've created for .sub divs (it interfeers with the jquery function).
NOTE: I don't use the div.homemenu or div.photosmenu as the containers for the hover because div's normally have some styles pre-applied by default and can interfeer with the desired behaviour (for example, they normally have width=100% so the hover applies even when you're outside of the button or subdiv in the same line). span is normally more innocuous to use it just as a wrapper.
I hope it helps
Oh! i got it. i was trying to do too much (show off.../ using what im learning).
I removed the line that added and removed the class 'inactive' and just toggled the SlideUp and slideDown when i wanted it too. now i can adjust the animation speed:
(HTML remains unchanged)
CSS: removed the "transition-duration: 1s;"
JavaScript:
$(function(){
var mmbutton = $('.mmbutton');//any/all buttons
var activebut= 0; //detect button classes
var mmdiv = $("div[id$='menu']");//detect button sub info
var start = "http://";
var address = "[address]/index.html"; //add "http://" + [blog or games] + address
var about = "http://[address]/aboutme.html";
var id = 0;
var sub = 0;
var slidespeed= 450; //slideUP/slideDown animation speed //added var for speed
//<click link buttons: (unchanged)
$(mmbutton).click(function(){
id = $(this).attr('id');
if (id === "home") {
location.replace(start+address);
}else if (id === "about") {
location.replace(start+'[address]/aboutme/index.html')
//add additional buttons here under 'else if' unless its a subdomain
}else {
location.replace(start+id+'.'+address);//goes to any subdomain by id
}
});
//<hover display:
//<detect mouse ON button
$(mmbutton).hover(function(){
id = $(this).attr('id');
sub = '#'+id+'sub';
activebut= $(this);
if ( $(activebut).hasClass('active')) {
}else {
$(sub).stop().slideDown(slidespeed);
}
});
//<detect mouse off button AND div
$(mmdiv).mouseleave(function(){
if ( $(activebut).hasClass('active')) {
}else {
$(sub).stop().slideUp(slidespeed);
}
});
});

Change Div Size dynamically

In my code, I've got 4 divs aligned inline.
What I want is, on clicking any div, it resizes to fill the space of all 4 divs (width:1000px)
and hides the other divs.
And on reclicking the div, it'll resize to the original dimensions.
This is what i've done till now.
<div class="gallery-image-replenish" id="bloc2" onclick="document.getElementById('bloc2').style.width = '980px'">
</div>
As of now, on click this resizes the div below the other divs. I know there's a method to hide the other divs, but I don't know how to do that.
With this kind of HTML:
<div class="gallery-image-replenish" id="bloc1"></div>
<div class="gallery-image-replenish" id="bloc2"></div>
<div class="gallery-image-replenish" id="bloc3"></div>
<div class="gallery-image-replenish" id="bloc4"></div>
you can use this kind of JS:
var handler = function(e){
e.target.style.width = "1000px";
for (j = divs.length; j--; ) {
if (divs[j].id != e.target.id) {
divs[j].style.display = "none";
}
}
}
var divs = document.getElementsByClassName('gallery-image-replenish'); //array of divs
var div;
for (i = divs.length; i--; ) {
div = divs[i];
div.addEventListener('click', handler);
}
Is it possible to use jQuery (jquery.com) on your project?
Because it would save a lot of code (and make it more readable!).
It would look like this (not tested, but probably works :P):
<div id="bloc1" class="gallery-image-replenish">1</div>
<div id="bloc2" class="gallery-image-replenish">2</div>
<div id="bloc3" class="gallery-image-replenish">3</div>
<div id="bloc4" class="gallery-image-replenish">4</div>
<script>
jQuery(document).ready(function(){
var galleryElements = $('.gallery-image-replenish');
galleryElements.click(function(){
var clickedElement = $(this);
if (clickedElement.hasClass('expanded')) { // if it has the class expanded, remove it (and show other elements again)
clickedElement.removeClass('expanded');
galleryElements.show();
} else { // if it has not got the expanded css class hide other and add class to expanded
galleryElements.not(clickedElement).hide(); // hide every other div
$(this).addClass('expanded'); // add stylesheet class for the new bigger width
}
});
});
</script>
The pure javascript way to hide an element is:
document.getElementById('otherdiv1').style.display = 'none';
Following is a solution which uses a common javascript function to perform what you want:-
<div class="gallery-image-replenish" id="bloc1" onclick="manageDivs(this.id)"> </div>
<div class="gallery-image-replenish" id="bloc2" onclick="manageDivs(this.id)"> </div>
<div class="gallery-image-replenish" id="bloc3" onclick="manageDivs(this.id)"> </div>
<div class="gallery-image-replenish" id="bloc4" onclick="manageDivs(this.id)"> </div>
<script type="text/javascript">
function manageDivs(divId)
{
document.getElementById(divId).style.width = '980px'";
//to hide rest of the divs
for(i=1;i<=4;i++)
{
if(divId!='bloc'+i)
document.getElementById('bloc'+i).style.display = 'none';
}
}
</script>
This is a simple exemple ,
var activ = false;
$('.aligned').live('click',function(){
if(!$(this).hasClass('actif')) {
$('.aligned').css('width','0');
$('.aligned').removeClass('actif');
$(this).css('width','1000px');
$(this).addClass('actif');
} else {
$('.aligned').css('width','250px');
}
});
you can use jQuery animate for more visual effect

Show and hide multiple DIVs with same class, but different IDs on clicking submit

I have a number of DIVs with the same class applied, but unique IDs. I want all the DIVs to be hidden on page load, then when the submit button is clicked I want one of the DIVs (determined by the ID) to become visible.
I thought the best way to do this would be using CSS classes.
I have set their default class in CSS to "inactive" with .configImageTitleInactive {display:none;}
I have a second class "active" with .configImageTitleActive {display:block;}
I have already defined and successfully populated the global variables temp1, temp2 and temp3, as these are being used elsewhere on the page.
When the submit button is clicked I need the code to:
Check if any of the DIVs already have the configImageTitleActive applied to the class and if so, change that class back to configImageTitleInactive.
Collate the 3 temp variables together (not numerically as these variables contain letters)
Compare the combined value against the IDs of the DIVs and switch on the visibilty of that DIV
The javascript code is below:
$(document).ready(function() {
$('img.submit').click(function() {
var $configImageTitle = temp1 + temp2 + temp3;
if ($configImageTitle == "cp-xos"){
$("div.configImageTitleActive").removeClass("configImageTitleActive").addClass("configImageTitleInactive");
var configImageTitleTemp = document.getElementById('cp-xos');
$configImageTitleTemp.addClass("configImageTitleActive");
}
else if ($configImageTitle == "cp-uos"){
$("div.configImageTitleActive").removeClass("configImageTitleActive").addClass("configImageTitleInactive");
var configImageTitleTemp = document.getElementById('cp-uos');
$configImageTitleTemp.addClass("configImageTitleActive");
}
else if ($configImageTitle == "cp-uod"){
$("div.configImageTitleActive").removeClass("configImageTitleActive").addClass("configImageTitleInactive");
var configImageTitleTemp = document.getElementById('cp-uod');
$configImageTitleTemp.addClass("configImageTitleActive");
}
else {
$("div.configImageTitleActive").removeClass("configImageTitleActive").addClass("configImageTitleInactive");
var configImageTitleTemp = document.getElementById('cp-xod');
$configImageTitleTemp.addClass("configImageTitleActive");
};
});
});
And the HTML:
<div class="configImageTitleBlock">
<div class="configImageTitleInactive" id="cp-xos">I am 1 CP-XOS</div>
<div class="configImageTitleInactive" id="cp-uos">I am 2 CP-UOS</div>
<div class="configImageTitleInactive" id="cp-uod">I am 3 CP-UOD</div>
<div class="configImageTitleInactive" id="cp-xod">I am 4 CP-XOD</div>
</div>
I'm open to suggestions, if there is a better way to do this.
Thank you in advance for your help.
Hm, I see you are using jQuery but not using the full power of it. Here's how you can do your task:
var configImageTitle = temp1 + temp2 + temp3;
$('div.configImageTitleActive').removeClass("configImageTitleActive").addClass("configImageTitleInactive");
$('#'+configImageTitle).addClass("configImageTitleActive");
ADDED:
As about doing it better:
<div class="configImageTitleBlock">
<div class="block" id="cp-xos">I am 1 CP-XOS</div>
<div class="block" id="cp-uos">I am 2 CP-UOS</div>
<div class="block" id="cp-uod">I am 3 CP-UOD</div>
<div class="block" id="cp-xod">I am 4 CP-XOD</div>
</div>
------- CSS --------
.configImageTitleBlock div.block {
display: none;
}
.configImageTitleBlock div.block.active {
display: block;
}
------- CSS --------
...eventandstuff(function() {
var activeElem = temp1 + temp2 + temp3;
$('.configImageTitleBlock div.block.active').removeClass("active");
$('#'+activeElem).addClass("active");
});
CSS has priorities of how properties are applied. In essence - the more detailed definition is in CSS - the higher priority it has. For example div {display: none} has lower priority than div.someclass {display: block}.
So in essence, I defined a class active, and a CSS rule for it .block.active which is more specific than just .block, that's why when it's applied, the rule from .block.active gets higher priority.
This approach is better because you don't need to define two separate classes for active and inactive. You can only use the active one.
Another advice: don't make classes that are context-specific, like configImageTitleInactive. Better make a generic class inactive or active and then just write more specific rule, like .configImageTitleBlock .active - this makes it more understandable and code is cleaner.
I think it would be better not to remove the main class and simply add class "active" instead, then check if element has class "active"
CSS:
<style>
.configImageTitle { display: none; }
.configImageTitle.active { display: block; }
</style>
JQuery:
$(document).ready(function() {
$('img.submit').click(function() {
var $configImageTitle = temp1 + temp2 + temp3;
if ($configImageTitle == "cp-xos"){
$("div.configImageTitle").hasClass("active") ? $("div.configImageTitle").removeClass("active") : "";
var configImageTitleTemp = $("#cp-xos");
$configImageTitleTemp.addClass("active");
} else {
/* and so on */
}
});
});
You could use a better logic like try setting all the divs visibility:hidden like shown below
<div class="configImageTitleInactive" id="cp-xos" style="visibility:hidden">I am 1 CP-XOS</div>
and from javascript access the div and set its visibilty to visible.
Thanks
AB
I guess pretty much what #Max wrote, just with a running example:
http://jsbin.com/agawov/11/edit
$( document ).ready(function() {
$(document)
.find('.configImageTitleBlock > div.configImageTitleActive')
.removeClass("configImageTitleActive");
$(document)
.find('.configImageTitleBlock > div#cp-xos')
.removeClass('configImageTitleInactive')
.addClass('configImageTitleActive');
});
Cheers.
Vitor.

Toggle innerHTML

I've seen various examples come close to what I am looking for, but none of it seems to describe it how I exactly want it. I am a beginner to jQuery, so explanations welcome.
I'm looking for this to toggle the innerHTML from - to +. Anyone know of a way to do this, efficiently?
jQuery/JavaScript
$(document).ready(function() {
$(".A1").click(function() {
$(".P1").toggle("slow");
$(".A1").html("+");
});
});
HTML
<div class="A1">-</div>
<h2 class="H1">Stuff</h2>
<div class="P1">
Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff
</div>
Thank you, anything relating to switching the inside text of an HTML element shall help. =)
How about adding a class that will let you know the expanded/collapsed status?
$(document).ready(function() {
$(".A1").click(function() {
var $this = $(this);
$(".P1").toggle("slow")
$this.toggleClass("expanded");
if ($this.hasClass("expanded")) {
$this.html("-");
} else {
$this.html("+");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="A1 expanded">-</div>
<h2 class="H1">Stuff</h2>
<div class="P1">
Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff
</div>
Example: http://jsfiddle.net/sGxx4/
$(document).ready(function() {
$(".A1").click(function() {
$(".P1").toggle("slow");
$(".A1").html(($(".A1").html() === "+" ? $(".A1").html("-") : $(".A1").html("+")));
});
});
A bit of explanation: I'm setting $("#A1").html() with the product of the tertiary operator, using it to check for the current value of #A1's text. If it's a +, I set the element's text to -, otherwise, I set it to +.
However, you said "efficiently." To this end, it's important to note that if you're going to use a selector twice or more in the same function, you should store the jQuery object that results from the selector you give in a variable, so you don't have to re-run the selector each time. Here's the code with that modification:
$(document).ready(function() {
$(".A1").click(function() {
var $A1 = $(".A1");
$(".P1").toggle("slow");
$A1.html(($A1.html() === "+" ? $A1.html("-") : $A1.html("+")));
});
});
There's no way to toggle content.
You could check if the $('.P1') is visible, then changing the +/- div according to that.
Something like :
$(document).ready(function() {
$(".A1").click(function() {
$(".P1").toggle("slow", function(){
if($(this).is(':visible'))
$(".A1").html("-")
else
$(".A1").html("+")
});
});
});
Using a callback function (the second argument of the .toggle() method) to do the check will guarantee that you're checking after the animation is complete.
JsFiddle : http://jsfiddle.net/cy8uX/
more shorter version
$(document).ready(function() {
$(".A1").click(function() {
var $self = $(this);
$(".P1").toggle("slow", function ( ) {
$self.html( $self.html() == "-" ? "+" : "-");
});
})
});
Here's a way that uses class names on a parent and CSS rules and doesn't have to change the HTML content and works off a container and classes so you could have multiple ones of these in the same page with only this one piece of code:
HTML:
<div class="container expanded">
<div class="A1">
<span class="minus">-</span>
<span class="plus">+</span>
</div>
<h2 class="H1">Stuff</h2>
<div class="P1">
Stuffy, Stuffy, Stuffed, Stuffen', Stuffing, Good Luck Stuff
</div>
</div>​
CSS:
.expanded .plus {display:none;}
.collapsed .minus {display: none;}
Javascript:
$(document).ready(function() {
$(".A1").click(function() {
$(this).closest(".container")
.toggleClass("expanded collapsed")
.find(".P1").slideToggle("slow");
});
});
​
Working demo: http://jsfiddle.net/jfriend00/MSV4U/

Selecting a single class from a multi class element

I'm trying to select a specific class (in this case page1, page2, page3 etc.)
I've written this code that works fine for a single class, i've tried using .match() to exclude the .plink class picked up in dis but can't get it working.
$(function(){
$("a.plink").click(function() {
var dis = $(this).attr("class"); // This is the problem line, I need it to contain 'page1' ONLY. Not 'page1 plink'.
$("#page1,#page2,#page3").hide();
$("#" + dis).show();
return false;
});
});
The HTML that is associated with this is:
<div id="page-links">
<a class="page1 plink" href="#">About</a>
<a class="page2 plink" href="#">History</a>
<a class="page3 plink" href="#">Backstage</a>
</div>
EDIT:
These are the DIV's being shown and hidden:
<div id="page1">
<?php include_once("page1.php");?>
</div>
<div id="page2">
<?php include_once("page2.php");?>
</div>
<div id="page3">
<?php include_once("page3.php");?>
</div>
Is there a simple way to achieve this without regular expression matching?
$(function(){
var pages = $('div[id^=page]');
$("a.plink").click(function() {
var dis = $(this).attr("class").replace(' plink', '');
pages.hide().filter('#' + dis).show();
return false;
});
});
This should be
$("." + dis).show();
for class and in your example there are all classes.
As you mentioned simple way so it could be
$("a.plink").click(function() {
$(".plink").hide();
$(this).show();
return false;
});
According to your question after edit
$("a.plink").click(function() {
$('div[id^="page"]').not('#page-links').hide();
pid=$(this).attr('class').split(' ')[0];
$('#'+pid).show();
return false;
});
Here is a fiddle.
The JavaScript code is not correct. With the "#" you select ids from the html-element.
As you have only classes, the right way is to do it with "."
So this would be correct:
$(function(){
$("a.plink").click(function() {
var dis = $(this).attr("class");
$(".page1,.page2,.page3").hide();
$("." + dis).show();
return false;
});
});
I didn't test it, but I think you have to change something with the var dis.
If you click on .page1, the variable dis would contain "page1 plink".
$("." + dis).show();
would be
$(".page1 plink").show();
So I recommend to split the two classes, as it should be like
$(".page1 .plink").show();
You are trying to associate functionality of a click by appending classes. It would make more sense to put id of the div you want to show in the href
html:
<div id="page-links">
<a class="plink" href="#page1">About</a>
<a class="plink" href="#page2">History</a>
<a class=" plink" href="#page3">Backstage</a>
</div>
<div id="page1">
Content 1
</div>
<div id="page2">
Content 2
</div>
<div id="page3">
Content 3
</div>
​javascript:
jQuery(function ($) {
var pages = [];
function showPage(page) {
var i;
for(i = 0; i < pages.length; i++)
{
if(page === pages[i]) {
$(pages[i]).show();
} else {
$(pages[i]).hide();
}
}
}
// Store each href in a pages array and add handlers
$('.plink').each( function() {
var page = $(this).attr('href');
pages.push(page);
$(this).attr('href', '#');
$(this).click(function () {
showPage(page);
});
});
// show the first page
if(pages.length > 0) {
showPage(pages[0]);
}
});​
Example:
http://jsfiddle.net/38qLB/
And just so I don't avoid the actual question, which is how do you select a class from a multi class element, you should follow this example of splitting up the class name Get class list for element with jQuery if you truly insist on using classes to make your link/div association
You don't really want to exclude the plink class, because that will bring you confusion and trouble when you need to add another class. Instead you want to extract just the pageX class:
// Regex for extracting pageXX
var reg = /^(.*\s)?(page\d+)([^\d].*)?$/;
dis = reg.exec(dis)[2];
I haven't testet this 100%, but put these two lines in right after var dis = $(this).attr("class"); and you should hopefully be good to go.
i down't know if i get your question right
to get all classes with class plink u can use
var klasses $("a.plink");
now u can loop true the items
var yourClasses = Array();
for(var klass in klasses)
{
var word = klass.attr('class').replace(" plink", "");
yourClasses.push(word);
}
now you have all the classes wich have the class plink
hope this was where u where looking for
If I was just doing a minor tweak to fix your existing structure I would do something like this:
$(document).ready(function() {
$('a.plink').click(function() {
var id = $.trim(this.className.replace('plink', ''));
/*adding a "page" class to each of the page divs makes hiding the visible one a bit easier*/
$('div.page').hide();
/*otherwise use the version from sheikh*/
//$('div[id^="page"]').not('#page-links').hide();
$('div#' + id).show();
});
});
The main change I would recommend to your existing markup would be to add a common "page" class to each of the page divs. Here is a fiddle
If I was starting on this from scratch I would probably take a slightly different approach in which I define an "active" class and toggle which elements have it rather than using show/hide on the divs. And that would end up looking something like this:
Markup:
<div id="page-links">
<a class="plink active" href="#page1">About</a>
<a class="plink" href="#page2">History</a>
<a class="plink" href="#page3">Backstage</a>
</div>
<div id="page1" class='page active'> </div>
<div id="page2" class='page'> </div>
<div id="page3" class='page'> </div>
CSS:
div.page
{
height: 300px;
display:none;
}
div.page.active
{
display:block;
}
a.plink
{
padding-left:5px;
padding-right:5px;
}
a.plink.active
{
background-color:#ddd;
}
div#page1
{
background-color:blue;
}
div#page2
{
background-color:green;
}
div#page3
{
background-color:red;
}
Script:
$(document).ready(function() {
$('a.plink').click(function() {
var id = $(this).attr('href');
$('.active').removeClass('active');
$(this).addClass('active');
$('div' + id).addClass('active');
});
});
Or the fiddle here.
Oh and to answer the title question rather than just the end behavior described...
var classes = this.className.split(' ');
var id;
for (var i = 0; i < classes.length; i++) {
if(classes[i].substring(4) === classes[i].replace('page', '')) {
id = classes[i];
break;
}
}
should end up with id containing the "page#" value associated with the link that was clicked regardless of its position in the list of classes.

Categories