我正在为我工作的公司制作一个扩展/崩溃电话费率表。我目前有一个表下面有一个按钮来展开它,按钮说“展开”。它是功能性的,除了我需要按钮改变为“折叠”时,它被点击,然后当然回到“展开”时,再次点击。按钮上的文字是背景图像。
所以基本上我所需要的是改变一个div的背景图像时,它被点击,除了有点像一个切换。
我正在为我工作的公司制作一个扩展/崩溃电话费率表。我目前有一个表下面有一个按钮来展开它,按钮说“展开”。它是功能性的,除了我需要按钮改变为“折叠”时,它被点击,然后当然回到“展开”时,再次点击。按钮上的文字是背景图像。
所以基本上我所需要的是改变一个div的背景图像时,它被点击,除了有点像一个切换。
当前回答
我个人只会使用JavaScript代码在两个类之间切换。
让CSS在你的div上勾勒出你需要的一切减去背景规则,然后添加两个类(例如:扩展和折叠)作为规则,每个规则都具有正确的背景图像(或背景位置,如果使用精灵)。
不同图片的CSS
.div {
/* button size etc properties */
}
.expanded {background: url(img/x.gif) no-repeat left top;}
.collapsed {background: url(img/y.gif) no-repeat left top;}
或CSS与图像精灵
.div {
background: url(img/sprite.gif) no-repeat left top;
/* Other styles */
}
.expanded {background-position: left bottom;}
然后……
带有图像的JavaScript代码
$(function){
$('#button').click(function(){
if($(this).hasClass('expanded'))
{
$(this).addClass('collapsed').removeClass('expanded');
}
else
{
$(this).addClass('expanded').removeClass('collapsed');
}
});
}
JavaScript与精灵
注意:优雅的toggleClass在ie6中不起作用,但是下面的addClass/removeClass方法在这种情况下也可以很好地工作
最优雅的解决方案(不幸的是Internet Explorer 6不友好)
$(function){
$('#button').click(function(){
$(this).toggleClass('expanded');
});
}
$(function){
$('#button').click(function(){
if($(this).hasClass('expanded'))
{
$(this).removeClass('expanded');
}
else
{
$(this).addClass('expanded');
}
});
}
据我所知,这种方法可以跨浏览器工作,而且比起在脚本中修改URL,我更喜欢使用CSS和类。
其他回答
这适用于WinXP上的所有当前浏览器。基本上就是检查当前的背景图像是什么。如果是image1,则显示image2,否则显示image1。
jsapi只是从谷歌CDN加载jQuery(更容易在桌面上测试misc文件)。
替换是为了跨浏览器兼容(opera和ie为url添加引号,而firefox、chrome和safari删除引号)。
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
var original_image = 'url(http://stackoverflow.com/Content/img/wmd/link.png)';
var second_image = 'url(http://stackoverflow.com/Content/img/wmd/code.png)';
$('.mydiv').click(function() {
if ($(this).css('background-image').replace(/"/g, '') == original_image) {
$(this).css('background-image', second_image);
} else {
$(this).css('background-image', original_image);
}
return false;
});
});
</script>
<style>
.mydiv {
background-image: url('http://stackoverflow.com/Content/img/wmd/link.png');
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="mydiv"> </div>
</body>
</html>
$('#divID').css("background-image", "url(/myimage.jpg)");
应该这样做,只是在元素上的点击事件中连接它吗
$('#divID').click(function()
{
// do my image switching logic here.
});
我个人只会使用JavaScript代码在两个类之间切换。
让CSS在你的div上勾勒出你需要的一切减去背景规则,然后添加两个类(例如:扩展和折叠)作为规则,每个规则都具有正确的背景图像(或背景位置,如果使用精灵)。
不同图片的CSS
.div {
/* button size etc properties */
}
.expanded {background: url(img/x.gif) no-repeat left top;}
.collapsed {background: url(img/y.gif) no-repeat left top;}
或CSS与图像精灵
.div {
background: url(img/sprite.gif) no-repeat left top;
/* Other styles */
}
.expanded {background-position: left bottom;}
然后……
带有图像的JavaScript代码
$(function){
$('#button').click(function(){
if($(this).hasClass('expanded'))
{
$(this).addClass('collapsed').removeClass('expanded');
}
else
{
$(this).addClass('expanded').removeClass('collapsed');
}
});
}
JavaScript与精灵
注意:优雅的toggleClass在ie6中不起作用,但是下面的addClass/removeClass方法在这种情况下也可以很好地工作
最优雅的解决方案(不幸的是Internet Explorer 6不友好)
$(function){
$('#button').click(function(){
$(this).toggleClass('expanded');
});
}
$(function){
$('#button').click(function(){
if($(this).hasClass('expanded'))
{
$(this).removeClass('expanded');
}
else
{
$(this).addClass('expanded');
}
});
}
据我所知,这种方法可以跨浏览器工作,而且比起在脚本中修改URL,我更喜欢使用CSS和类。
我在一个论坛上找到了一个解决方案,切换背景Img。
旧帖子,但这将允许你使用图像精灵和调整重复,以及通过使用css属性的速记(背景,重复,左上角)的定位。
$.each($('.smallPreview'), function(i){
var $this = $(this);
$this.mouseenter(function(){
$this.css('background', 'url(Assets/imgs/imgBckg-Small_Over.png) no-repeat 0 0');
});
$this.mouseleave(function(){
$this.css('background', 'url(Assets/imgs/imgBckg-Small.png) no-repeat 0 0');
});
});