jquery operate

2132 readers

ilovecolors

How to select and reveal elements with jQuery

One user asked the other day on the jQuery Tabs tutorial how to highlight the particular tab we selected. In this tutorial we will see some way to select different elements using jQuery, from a basic multiple selection , a multiple selection revealing content and a excluding selection revealing content . See the three examples and read on.

Basic Selection

First things first, we will select an item, deselect it, we won’t worry about the other elements. In this case the markup is a simple list.

< ul id = "block" >

  < li class = "selected" >

    This is text  that is initially selected.

  </ li >

  < li >

    but you can select this too

  </ li >

  < li >

    or if you wanna go crazy, select this!

  </ li >

</ ul >

We will leave the matter of avoiding multiple selections for the final example. For now, this is as simple as adding and removing a class, or in jQuery, toggling a class.

jQuery( "#block li" ).click( function (){

jQuery( this ).toggleClass( "selected" );

  });

The .selected class looks like this

.selected {  color : #f70 ; }

Done. This basic selection example is really easy but it’s not very useful. Let’s see how to provide your users some kind of important extra information like “You selected this.”

Multiple selection revealing content

This version has the same markup but we will be adding an extra paragraph inside the li element to add some feedback for the user. The p elements that are meant to remain invisible will be given an . invisible class.

< li class = "selected" >

  This is text  that is initially selected.

  < p >

  You selected this.

  </ p >

  </ li >

  < li >

  but you can select this too

  < p class = "invisible" >

  You selected this.

  </ p >

  </ li >

  < li >

  or if you wanna go crazy, select this!

  < p class = "invisible" >

  You selected this.

  </ p >

  </ li >

The .invisible class has only this:

.invisible {  display : none ; }

Now our JS in addition to toggle the class will have to toggle the invisible class for the child p elements. We add the following right after toggling the selected class.

jQuery( this ).children( "p" ).toggleClass( "invisible" );

So this is what we get with the multiple selection revealing content .

Single selection revealing content

Our final example is an exclusive selection. We won’t be able to select two elements. This isn’t limited to a small list selection. You could hide and reveal large areas of your site or you could apply it to the former jQuery Tabs to highlight the tab you’re currently in. We will achieve this highlighting only the title instead of the whole element content like the previous example.

The markup is almost the same but we will wrap the li text with a span element:

< li >

  < span >This is text  that is initially selected.</ span >

  < p >

  jQuery is awesome.

  </ p >

  </ li >

  < li >

  < span >but you can select this too</ span >

  < p >

  Google AJAX API is awesome.

  </ p >

  </ li >

  < li >

  < span >or if you wanna go crazy, select this!</ span >

  < p >

  Web develop is great!.

  </ p >

  </ li >

On the JS we will now store the currently selected li element for later use:

var current = jQuery( "#block li:first" );

  jQuery( "#block li" ).click( function (){

 

  current.children( "span" ).removeClass( "selected" );

  current.children( "p" ).addClass( "invisible" );

 

  jQuery( this ).children( "span" ).addClass( "selected" );

  jQuery( this ).children( "p" ).removeClass( "invisible" );

 

  current = jQuery( this );

  });

We will remove first the .selected classs from the span of the former item and hide its p element. Then we will add the .selected class to the current item and reveal its p element. Done. This is all you need to create and exclusive selection with jQuery .

You can download the file for closer inspection.

Download jQuery Reveal and Select

I hope you find it useful, see you next time.

You might want to check these related posts:

Multiple instances of jQuery Tabs How to create drag & drop interaction with jQuery Creating Rotating Tabs using jQuery Collapsible Panel Slider Gallery Shortcode for WordPress

Liked this? buy me a coffee so I can stay awake doing more things like this.

Spread the word, share this post

Tags: javascript , resources , tutorials , usability

Posted on Friday, July 17th, 2009 in jQuery .

“How to select and reveal elements with jQuery” received 10 comments! Add yours. Elliot July 23rd, 2009

GC Browne, you send me a queston through the contact form. You can load your own jQuery, instead of using Google’s hosted one, by adding jQuery to the xhtml page and then calling the functions inside a jQuery(document).ready, like this
jQuery(document).ready(function(){
jQuery(“#block li”).click(function(){
jQuery(this).toggleClass(“selected”);
});
}

Webstandard-Team July 28th, 2009

Nice small jQuery-Tutorial! If you are interested in more jQuery, you don’t have to miss the following two articles: “Creative Image-Galleries by jQuery” or “Webdesign inspired by jQuery and Twitter” !

You are now listed on FAQPAL August 8th, 2009

How to select and reveal elements with jQuery…

In this tutorial we will see some way to select different elements using jQuery, from a basic multiple selection, a multiple selection revealing content and a excluding selection revealing content….

Luciano September 30th, 2009

?Awesome! ?Thanks!

Pariah Burke October 3rd, 2009

Great tutorials, Elliot, but I can’t seem to figure out how to integrate the Single selection revealing content with your jQuery tabs. I can get the .selected class added to every new tab, but REMOVED from previously selected tabs. Could you please post the code of your jQuery Tabs using the .selected add and remove technique?

Pariah Burke October 6th, 2009

Rather, I meant to say: “…but NOT REMOVED from previously selected tabs…”

Michel November 24th, 2009

cool … this helped me :*

Elliot December 8th, 2009

I’ve published a new code for rotating jQuery tabs featuring selection.

learkickfoxp January 5th, 2010

la variante Ideal

coilover shock May 5th, 2010

nice and easy to use your code

Leave a comment

Name (required) Mail (won't be published) (required) Website

Notify me of follow-up comments by e-mail

Comment Say it!

WP 2.8.2 fixes vulnerability ? ? Web font service from Typotheque

Go back to the top

Graphic design Inspiration jQuery Technology Typography WordPress

Advertise Here

Recent Posts Express for iPhone: publish to your WordPress tumblog Cross-Browser CSS3 Rule Generator Typographic artwork Free font Matilde by TypeDepot

Express for iPhone: publish to your WordPress tumblog

Express App is an app from WooThemes to publish from iPhone to your tumblog powered by WordPress and the  WooThumblog plugin.

You might want to check these related posts:

Yoast’s WordPress SEO Plugin How to create a TinyMCE button plugin for WordPress How to display hidden buttons in TinyMCE for WordPress New default theme TwentyTen Display PDF using Thickbox in a WordPress plugin

Cross-Browser CSS3 Rule Generator

With  CSS3 Please! you get to play with CSS3 properties applied in real time to an element, getting cross browser rules in return.

The project, by Paul Irish, encompasses almost all CSS3 properties, such as border radius, gradient, tranform, box/text shadow, @font-face, rgba and transition.

You might want to check these related posts:

Slider Gallery Shortcode for WordPress DevPress launches 5 WordPress presentations worth watching 10 tools to improve SEO + 5 WordPress SEO plugins Free font: Rue Display by Type Together

Typographic artwork

Cool typographic artwork by  Pablo Moreno .

You might want to check these related posts:

Alphabattle @ LetterCult Dream the Electric Chacundum Okay, let’s type Chino Lettering & design from Brazil

Adobe Migrates to WordPress

WordPress Publisher Blog announced today that  Adobe Migrated to WordPress 1200 blogs formerly running on MovableType.

Clean restart for your stylesheet

Want to remove all properties from your CSS leaving the selectors intact? in Aptana , use the regular expressions (.*?):(.*?); and (.*?):(.*?)\R to clean everything.

You might want to check these related posts:

5 Dark Themes for Aptana Installing Aptana 1.5.1 + Aptana PHP WordPress code templates for Aptana

Colorcitos baby clothing 365 daily design GraphicSnippets Solo Kawaii

Follow me on Twitter Firefox 4 Delayed Until Early 2011 ~ Firefox is already delayed behind Google Chrome ;P It will soon fit nowhere http://bit.ly/cIaorq

Tags

aptana book browser buddypress cms color contest custom taxonomies development dribbble drupal ecommerce flash freebie free font google icons ide illustration javascript lettering magento membership open source painting plugin resources seo shortcode showcase slider social network sudtipos tabs texture tools tutorials typeface type foundry ubiquity usability user experience user profile web application wordpress themes

Tutorial 9 The Designed wpargentina Daily Type The art of hand lettering

ilovecolors?2010 - Hosting by WizHosting - Powered by WordPress

http://www.ilovecolors.com.ar/select-reveal-jquery/

查看更多关于jquery operate的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did43721