如何突出显示单击的div? [英] How to highlight clicked div?

问题描述

我有一系列这样的div:

I have a series of divs like this:

<div id="listofstuff">
    <div id="anitem">
        <span class="itemname">Item1</h3></span>
        <span class="itemdescruption">AboutItem1</span>
    </div>
    <div id="anitem">
        <span class="itemname">Item2</h3></span>
        <span class="itemdescruption">AboutItem2</span>
    </div>
    <div id="anitem">
        <span class="itemname">Item3</h3></span>
        <span class="itemdescruption">AboutItem3</span>
    </div>
</div>

我想这样做的是，当用户单击动画"时，被点击的动画突出显示，并且项目名称仅在警报框中弹出.

I want to make to so when the user clicks on an "anitem", the one that was clicked is highlighted and the itemname only pops up in an alertbox.

推荐答案

说明

首先，我不得不说id's在您的文档中必须是唯一的，请选择一个类. 然后，您可以使用jQuery的click()和css()方法进行更改.

Description

At first i have to say that id's must be unique in your document, choose a class instead. Then you can use jQuerys click() and css() method to change something.

id属性为HTML元素指定唯一ID(ID属性值在HTML文档中必须唯一).

The id attribute specifies a unique id for an HTML element (the id attribute value must be unique within the HTML document).

查看我的示例，然后 jsFiddle演示

Check out my sample and jsFiddle Demonstration

<div id="listofstuff">
<div class="anitem">
       <span class="itemname">Item1</h3></span>
       <span class="itemdescruption">AboutItem1</span>
</div>
<div class="anitem">
       <span class="itemname">Item2</h3></span>
       <span class="itemdescruption">AboutItem2</span>
</div>
<div class="anitem">
       <span class="itemname">Item3</h3></span>
       <span class="itemdescruption">AboutItem3</span>
</div>
</div>


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

更多信息

• jsFiddle演示
• w3c-HTML id属性
• jQuery-.click()
• jQuery-.css()

More Information

• jsFiddle Demonstration
• w3c - HTML id Attribute
• jQuery - .click()
• jQuery - .css()

这篇关于如何突出显示单击的div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！