2 qq 29623455 qq_29623455 于 2016.03.18 10:58 提问

小白求助,关于按钮点击更换背景的问题

单击按钮时,改变其背景图片。当另一个按钮被点击时,原先的按钮恢复初始状态,现被点击的那个改变,图片数量没有具体限制

11个回答

qq_19891827
qq_19891827   2016.03.18 11:16

把html代码发上来,不然不知道你这些按钮之间的关系。另请把需求再描述的清楚一点

fubo1990
fubo1990   2016.03.18 11:18

首先给两个按钮都设置id属性,比如id1,id2。id1的原来图片为1.jpg.点击后的图片为2.jpg.id2的原来图片为3.jpg,点击后的图片为4.jpg
点击id1按钮的事件
$(function(){
$("#id1").click(function(){
$(this).css("background-image","url(2.jpg)");
})
$("#id2").click(function(){
$("#id1").css("background-image","url(1.jpg)");
$(this).css("background-image","url(4.jpg)");
})

})

qq_29623455
qq_29623455   2016.03.18 11:22

补充一下问题吧

以上是我的按钮,上面的click是点击跳转用的
效果图如下
图片说明

qq_29623455
qq_29623455   2016.03.18 11:23













代码怎么不显示
fubo1990
fubo1990   2016.03.18 11:23

你采用我上面说的方法,然后进行相应图片路径和按钮id修改就能实现的

qq_29623455
qq_29623455 是不是太繁琐了,大概有八九个按钮
接近 2 年之前 回复
qq_29623455
qq_29623455   2016.03.18 11:24
   <div class="ot-menu" id="scroller">
        <ul>
            <li><img onclick="selectInfo(1)" src="../imgClassification/one1a.jpg"></li>
            <li><img onclick="selectInfo(2)" src="../imgClassification/one2a.jpg"></li>
            <li><img onclick="selectInfo(3)" src="../imgClassification/one3a.jpg"></li>
            <li><img onclick="selectInfo(2)" src="../imgClassification/one4a.jpg"></li>
            <li><img onclick="selectInfo(3)" src="../imgClassification/one5a.jpg"></li>
            <li><img onclick="selectInfo(1)" src="../imgClassification/one1a.jpg"></li>
            <li><img onclick="selectInfo(2)" src="../imgClassification/one2a.jpg"></li>
            <li><img onclick="selectInfo(3)" src="../imgClassification/one3a.jpg"></li>
        </ul>
    </div>
qq_28919337
qq_28919337   2016.03.18 11:25

radiogroup+radiobutton可以搞定

qq_28919337
qq_28919337 回复qq_29623455: 我以为是android,然后就没有然后了
接近 2 年之前 回复
qq_29623455
qq_29623455 能详细点吗
接近 2 年之前 回复
qq_19891827
qq_19891827   2016.03.18 11:42

做一张纯白色的背景图片,假设命名为bg.jpg;其他背景图片依次命名为 p0.jpg,p1.pjg,p2.jpg.........
jquery代码:

 $('#scroller ul li').each(function(index,domEle){
     var url='url(p'+index+'.jpg)';
     $(this).click(
            $(this).siblings()..css('background-image','url(bg.jpg)');
            $(this).css('background-image',url);
     );
 });
qq_19891827
qq_19891827   2016.03.18 11:43

手残,css前面多了一个".",请把它去掉

u013772876
u013772876   2016.03.18 13:13

贴出你的代码或参照楼上给出的代码示例!

共11条数据 1 尾页
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!