+ Reply to Thread
Results 1 to 2 of 2

Thread: How to highlight a div when clicked?

  1. #1

    How to highlight a div when clicked?

    My divs are like that:

    Code:
    <div id="listofstuff">
        <div id="item">
            <span class="itemname">Item1</h3></span>
            <span class="itemdescription">AboutItem1</span>
        </div>
        <div id="item">
            <span class="itemname">Item2</h3></span>
            <span class="itemdescription">AboutItem2</span>
        </div>
        <div id="item">
            <span class="itemname">Item3</h3></span>
            <span class="itemdescription">AboutItem3</span>
        </div>
    </div>
    I want to make to so when the user clicks on an "item", the one that was clicked is highlighted and the itemname only pops up in an alertbox.

  2. #2
    Junior Member
    Join Date
    Jan 2012
    Posts
    19
    Firstly , id`s must be unique , choose a class instead. Then you can use jQuerys click() and css() method to change something.
    the id attribute value must be unique within the HTML document.

    Code:
    <div id="listofstuff">
    <div class="item">
           <span class="itemname">Item1</h3></span>
           <span class="itemdescription">AboutItem1</span>
    </div>
    <div class="item">
           <span class="itemname">Item2</h3></span>
           <span class="itemdescription">AboutItem2</span>
    </div>
    <div class="item">
           <span class="itemname">Item3</h3></span>
           <span class="itemdescription">AboutItem3</span>
    </div>
    </div>

    Code:
    $(".anitem").click(function() {
       $(this).css("backgroundColor", "red"); 
    });

+ Reply to Thread

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts