<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.