<a>扩展</a>锚<a>标记+ CSS后</a>更改锚<a>标记的</a>背景图片
[英]Change background image of anchor <a> tag after expanding it + CSS
问题描述
因此，基本上我想尝试的是单击<a>锚标记后，我想更改其背景。
示例：见下图
单击此链接后，我正在其正下方生成（扩展）一个div标签并在其上显示策略。
我想像展开/折叠时一样展开箭头转弯：
请参见下图：图像名称： (black_t_arrow.gif)
这样，当策略链接折叠时，它将显示向下箭头图像，并且在单击“策略”链接后再次显示向下箭头图像，它应以原始箭头隐藏该向下箭头图像，这意味着它应返回到先前的状态。
以下是我的CSS代码：
.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("/common/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; }
以下是HTML代码：
<p class="expended_div open"><a href="#">Policies</a></p>
<div class="expand_collapse" style="display:none;">
<p><?php
//some php code
}
?></p>
</div>
如何使用CSS实现此目的？
提前致谢。
4 个解决方案
解决方案1
2 2013-01-23 05:24:38
我假设您有一个javascript onclick（或类似的）来切换菜单项的样式以将其展开。 如果您在菜单项上有一个ID，那么在触发的JS中，我将使用测试来检查打开/关闭状态，并根据需要覆盖或重置CSS项
document.getElementById("menuItem").style.backgroundImage = "url(black_t_arrow.gif)";
解决方案2
2 已采纳 2013-01-23 05:40:43
您需要两个CSS类，一个用于折叠，一个用于扩展。
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');
}
});
要么：
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');
解决方案3
2 2013-01-23 06:00:05
这似乎是对CSS精灵一份工作，作为奠定了这里 。 我的解决方案的jsFiddle在这里 。
基本思想是创建包含两个箭头的单个图像。 由于您将此图像用作背景，因此仅显示填充<a>标签内容的图像部分。 要在一个图像和另一个图像之间切换，您需要做的就是更改css background-position属性。
在支持DOM的函数中：
$(".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");
});
为此，请将“ black_t_arrow.gif”更改为如下所示：
关于此的最酷的事情是第二张图像没有加载时间。 它已经存在，但是由于背景图像大于内容区域而从视图中隐藏。
解决方案4
1 2013-01-23 05:10:34
我不了解CSS，但是如果您使用的是jQuery UI框架，则以下链接将为您提供帮助
http://jqueryui.com/accordion/
您将必须使用以下属性
$( "#accordion" ).accordion({ collapsible: true });
尝试以下代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://ajax.googleapis.com/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>Welcome</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在http://api.jqueryui.com/accordion/上查看“ Accordian”文档
在特定时间间隔后更改“body”标签中的“background-image”
[英]Change 'background-image' in 'body' tag after specific time interval
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.