GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

No menu could be recovered. Follow the blue links in the page.

This view

  • Original page
  • New address

GeezerVison is showing javascript.info — Selectable list

  • Tutorial
  • Browser: Document, Events, Interfaces
  • UI Events
  • Mouse events
back to the lesson

Selectable list

importance: 5

Create a list where elements are selectable, like in file-managers.

  • A click on a list element selects only that element (adds the class .selected), deselects all others.
  • If a click is made with Ctrl (Cmd for Mac), then the selection is toggled on the element, but other elements are not modified.

The demo:

P.S. For this task we can assume that list items are text-only. No nested tags.

P.P.S. Prevent the native browser selection of the text on clicks.

Open a sandbox for the task.

Open the solution in a sandbox.

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.