javascript - Active or Focus Effect on HTML< Ul> tag - Stack Overflow

admin管理员组

文章数量:1202337

Here is a sample ul tag:

<ul style="list-style-type:none; padding:5px ; border:solid 1px #666666;">
    <li>I am wating </li>
    <li>I am wating </li>
    <li>I am wating </li>
    <li>I am wating </li>
    <li>I am wating </li>

Is there any way with css or JavaScript to set this Ul border different color when it is clicked or active ? And when I click in different place this effect gone . I was trying to make and search but not any good result came out .

Js Fiddle Demo: /

No problem also if there is any jquery solution .

Here is a sample ul tag:

<ul style="list-style-type:none; padding:5px ; border:solid 1px #666666;">
    <li>I am wating </li>
    <li>I am wating </li>
    <li>I am wating </li>
    <li>I am wating </li>
    <li>I am wating </li>

Is there any way with css or JavaScript to set this Ul border different color when it is clicked or active ? And when I click in different place this effect gone . I was trying to make and search but not any good result came out .

Js Fiddle Demo: http://jsfiddle.net/saifrahu28/YFF6P/

No problem also if there is any jquery solution .

• javascript
• html
• css

Share Improve this question Follow edited May 14, 2013 at 13:27 S Raihan asked May 14, 2013 at 13:12 S RaihanS Raihan 38722 gold badges99 silver badges1818 bronze badges 3

• 1 do you have to use pure js? – Pete Commented May 14, 2013 at 13:14
• I don't have any problem using any js but Actually I am no hat good with java script I am finding it difficult to make js for this Effect – S Raihan Commented May 14, 2013 at 13:21
• in which case I would use the jquery library (makes javascript a lot easier) and add a class: jsfiddle.net/YFF6P/12 – Pete Commented May 14, 2013 at 13:23

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 14

You can add tabindex to each li. This will enable outline on it (basically, it will act like inputs in focus):

<ul style="list-style-type:none; padding:5px ; border:solid 1px #666666;">
        <li tabindex="1">I am wating </li>
        <li tabindex="1">I am wating </li>
        <li tabindex="1">I am wating </li>
        <li tabindex="1">I am wating </li>
        <li tabindex="1">I am wating </li>
</ul>

http://jsfiddle.net/YFF6P/2/

After that is done, you may change appearance of outline with outline property in css Here is with outline example: http://jsfiddle.net/YFF6P/4/ css:

li:focus {
    outline:solid 1px black;
}

Building off of FAngels answer....

You wouldn't want to hard code the list style, otherwise you will have to use !important in the css. You change the tabindex to the UL and add a class to it. When it has focus, it will change to the ul:focus item.

HTML

<ul tabindex="1" class="thisList" >
    <li>I am wating </li>
    <li>I am wating </li>
    <li>I am wating </li>
    <li>I am wating </li>
    <li>I am wating </li>

</ul>

CSS

ul:focus {
    outline:solid 1px green;
}

.thisList { list-style-type:none; padding:5px ; border:solid 1px #666666; }

http://jsfiddle.net/YFF6P/14/

li:active, .test li:focus{border: 1px solid red;}

Why not just use the jQuery addClass() function ?

本文标签： javascriptActive or Focus Effect on HTMLlt Ulgt tagStack Overflow