javascript - Change background image of anchor <a> tag after expanding it + CSS - Stack Overflow

admin管理员组

文章数量:1327838

So, What basically I am trying is after clicking on <a> anchor tag I want to change the background of it.

Example : See image below

After clicking on this link I am generating (expanding) one div tag exactly below to it and displaying the polices on it.

I want to expand arrow turn when expanding/collapsing like :

See Image below: Image Name: (black_t_arrow.gif)

So that It will display image down arrow image when policies link is collapsed and again vice versa after clicking on Policies link it should hide that down arrow image with original one means it should return to the previous state.

Following is my CSS code:

.expended_div{ float:left; width:100%; padding:10px 0}
.expended_div a{ color:#000; font-size:11px; text-decoration:underline; margin-left:15px; font-weight: bold; background-image: url("/mon/images/black_t_arrow.gif");
                 background-position: 0 2px;
                 background-repeat: no-repeat; padding-left: 9px;}
.expended_div a:hover{ text-decoration:underline}
.expand_collapse{ float:left;  padding:10px 20px; }

Following is HTML code:

<p class="expended_div open"><a href="#">Policies</a></p>
    <div class="expand_collapse" style="display:none;">
        <p><?php
      //some php code
    }
    ?></p>
    </div>

How can I achieve this using CSS?

Thanks in advance.

So, What basically I am trying is after clicking on <a> anchor tag I want to change the background of it.

Example : See image below

After clicking on this link I am generating (expanding) one div tag exactly below to it and displaying the polices on it.

I want to expand arrow turn when expanding/collapsing like :

See Image below: Image Name: (black_t_arrow.gif)

So that It will display image down arrow image when policies link is collapsed and again vice versa after clicking on Policies link it should hide that down arrow image with original one means it should return to the previous state.

Following is my CSS code:

.expended_div{ float:left; width:100%; padding:10px 0}
.expended_div a{ color:#000; font-size:11px; text-decoration:underline; margin-left:15px; font-weight: bold; background-image: url("/mon/images/black_t_arrow.gif");
                 background-position: 0 2px;
                 background-repeat: no-repeat; padding-left: 9px;}
.expended_div a:hover{ text-decoration:underline}
.expand_collapse{ float:left;  padding:10px 20px; }

Following is HTML code:

<p class="expended_div open"><a href="#">Policies</a></p>
    <div class="expand_collapse" style="display:none;">
        <p><?php
      //some php code
    }
    ?></p>
    </div>

How can I achieve this using CSS?

Thanks in advance.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jan 23, 2013 at 4:59 J.K.A. asked Jan 23, 2013 at 4:58 J.K.A.J.K.A. 7,4042525 gold badges9999 silver badges164164 bronze badges 2

• I think javascript is the way to go, for css I have no idea. – Eli Commented Jan 23, 2013 at 5:00
• You can't change classes with CSS. You could use the pseudo-class :active, but that is not guaranteed to work as you like – Explosion Pills Commented Jan 23, 2013 at 5:09

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

You need two CSS classes, one for the collapse and one for the expanded.

HTML:

<a id="expander" class="close" href="#">Click to collapse/expand</a>

CSS:

.close { background-image: url("/images/collapsed.gif"); }
.open { background-image: url("/images/expanded.gif"); }

JavaScript:

/* Useful for multiple CSS classes. */
$('a#expander').click(function(e){
    e.preventDefault();
    var exp = $(this);
    if (exp.hasClass('open')) {
        exp.removeClass('open').addClass('close');
    } else {
        exp.removeClass('close').addClass('open');
    } 
});

OR:

CSS:

a#expander { background-image: url("/images/collapsed.gif"); } /* set default image */ 
.open { background-images: url("/images/expanded.gif"); }

JavaScript:

/* Swap in/out the class open to override the default background. */
$('a#expander').toggleClass('open');

I assume you have a javascript onclick (or similar) to toggle the style for the menu item to expand it. If you have an ID on the menu items then in the JS that's triggered I would use a test for open/close status and over-ride or reset the CSS items as needed

document.getElementById("menuItem").style.backgroundImage = "url(black_t_arrow.gif)";

This seems like a job for CSS sprites, as laid out here. My jsFiddle for the solution is here.

The basic idea is to create a single image that contains both arrows. Since you're using this image as a background, only the part of the image that fills up your <a> tag content will display. To change between one image and the other, all you need to do is change the css background-position property.

Inside your DOM-ready function:

$(".expended_div a").on("click", function() {
   if(this.css("background-position") == "0px -8px")
    this.css("background-position", "0px -31px");
   else
    this.css("background-position", "0px -8px");
 });

For this to work, change "black_t_arrow.gif" to look like this:

The cool thing about this is that there's no loading time for the second image. It's already there, but hidden from view because the background image is larger than the content area.

I don't know about css but if you are using the jquery ui framework then following link will help you

http://jqueryui./accordion/

u will have to use following property

$( "#accordion" ).accordion({ collapsible: true });

try following Code:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery./ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery./jquery-1.8.3.js"></script>
<script src="https://ajax.googleapis./ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />

<script>
$(function() {
$( "#accordion" ).accordion({ collapsible: true });
});
</script>

</head>
<body>
 <div id="accordion">

   <h3>Section 1</h3>
   <div>
   <p>Wele</p>
   </div>

   <h3>Section 2</h3>
   <div>
   <p>Hi</p>
   </div>

   <h3>Section 3</h3>
   <div>
   <p>Hello</p>
   </div>

   <h3>Section 4</h3>
   <div>
   <p>How are you?</p>
   <p>Have a nice day.</p>
   </div>

</div>
</body>
</html>

Aslo check the documentation for the 'Accordian' at http://api.jqueryui./accordion/

本文标签： javascriptChange background image of anchor ltagt tag after expanding itCSSStack Overflow