admin管理员组文章数量:1327685
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.
Share Improve this question edited Jan 23, 2013 at 4:59 J.K.A. asked Jan 23, 2013 at 4:58 J.K.A.J.K.A. 7,40425 gold badges99 silver badges164 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
4 Answers
Reset to default 2You 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
版权声明:本文标题:javascript - Change background image of anchor <a> tag after expanding it + CSS - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742216430a2434648.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论