单击时更改 png 图像，但第二次单击后新图像恢复为原始图像

很抱歉标题缠绕，但很难用一行来解释。

这是我正在尝试做的：

单击列表"项目 2"时，我将蓝色加号图标的图像更改为黄色加号图标，反之亦然。 (完成(
将使标题/巨型部分动画化，同时将加号图标更改为减号图标(完成(
但是，当我单击列表"item 2"时，它将蓝色图标更改为黄色，然后单击该图标以动画标题/巨型屏幕，黄色图标变回蓝色图标。我希望黄色图标在单击"项目 2"时保持黄色，而蓝色图标在单击"项目 1"时保持蓝色。

//ANIMATE UP/DOWN ON CLICK OF ICON
$(document).ready(function(){
	$(".topBarInner").click( function(event){
		event.preventDefault();
   
		if ($(this).hasClass("clicked")) {
			$("#contentContainer").stop().animate({marginTop:"0px"}, 200); 
			$(".jumbotron, .headerRow").show(200);	
			$(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-up.png)");
        }else {
			$("#contentContainer").stop().animate({marginTop:"160px"}, 200);
			$(".jumbotron, .headerRow").hide(200); 
			$(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-down.png)");
		} 
		$(this).toggleClass("clicked");
		return false;
	});
    
});
    
//CHANGE ICON & BACKGROUND COLOR
        
function changeColor1() {
    $('.jumbotron').css('background-color','#6aabcb');
    $('.topBar').css('background-color','#bdd2f1');
    $('.topBarInner').css('background-image','url(http://www.ericnguyen23.com/images/host/arrow-up.png)');
}
function changeColor2() {
    $('.jumbotron').css('background-color','#e4b028');
    $('.topBar').css('background-color','#ffce4e');
    $('.topBarInner').css('background-image','url(http://www.ericnguyen23.com/images/host/arrow-up-yellow.png)');
}

.headerRow{
	padding:52px 0;
    position: relative;
	} 
    
.jumbotron {
	margin-top:-10px;
	padding:175px 0 0px 0;
	background-color:#6aabcb;
	color: white;
	position:relative;
	}
    
.topBar{
	height:11px;
	width:98%;
	background-color:#bdd2f1;
	position:absolute;
	bottom:85px;
	}
	
.topBarInner{
	background-image: url(http://www.ericnguyen23.com/images/host/arrow-up.png);
	background-repeat: no-repeat;
	background-size:contain;
	height:28px;
	width:28px;
	margin:0 auto;
	}
    
.clicked{
	background-image: url(http://www.ericnguyen23.com/images/host/arrow-down.png);
	}

<link href="http://www.ericnguyen23.com/images/host/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
	<div class="row headerRow">
        <a href="#"><img src="http://www.ericnguyen23.com/images/host/logo.jpg"/></a> 
    </div>  
</div>
<div class="jumbotron"></div>
<div id="contentContainer">   
	<div class="row">
        <div class="col-xs-12">
            <div class="topBar"><div class="topBarInner"></div></div>  
        </div>
    </div>
    
    <div class="row">
    	<div class="col-xs-12">
            <ul> 
                <li><a href="#" data-toggle="tab" onclick="changeColor1()">Item 1</a></li>   
                <li><a href="#" onclick="changeColor2()">Item 2</a></li>    
            </ul>     
      	</div>
    </div> 
</div><!--/container-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这是一个快速修复!important css 中的关键字，并使用类更新 dom，而不是更改所选类的样式。!important关键字不是一个好的做法，但这是我迄今为止发现的唯一修复它的方法。我明天再看看，看看能不能帮上忙。此外，我已经将jQuery的链接从<body底部移到了<head部分，因为所有库都应该在那里。我已按照建议将本地 JavaScript 脚本放在body的底部。以下是完整代码：

<!DOCTYPE HTML>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="styles2.css">
    <link href="http://www.ericnguyen23.com/images/host/bootstrap.min.css" rel="stylesheet"/>
    <link rel="icon" href="./bilder/icon.ico">  
    <title>Kletterwelt - Home</title>
</head>
<body>
  <div class="container">
    <div class="row headerRow">
          <a href="#"><img src="http://www.ericnguyen23.com/images/host/logo.jpg"/></a> 
      </div>  
  </div>
  <div class="jumbotron"></div>
  <div id="contentContainer">   
    <div class="row">
          <div class="col-xs-12">
              <div class="topBar"><div class="topBarInner"></div></div>  
          </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
              <ul> 
                  <li><a href="#" data-toggle="tab" onclick="changeColor1()">Item 1</a></li>   
                  <li><a href="#" onclick="changeColor2()">Item 2</a></li>    
              </ul>     
          </div>
      </div> 
  </div><!--/container-->
  <script src="scripts2.js"></script>
</body>
</html>

CSS 中的其他类：

.jumbotron-colored {
  background-color: #e4b028 !important;
}
.topBar-colored {
  background-color: #ffce4e !important;
}
.topBarInner-colored {
  background-image: url(http://www.ericnguyen23.com/images/host/arrow-up-yellow.png) !important;
}

JS文件更改中的changeColor()函数：

function changeColor1() {
    $('.jumbotron').removeClass('jumbotron-colored');
    $('.topBar').removeClass('topBar-colored');
    $('.topBarInner').removeClass('topBarInner-colored');
}
function changeColor2() {
    $('.jumbotron').addClass('jumbotron-colored');
    $('.topBar').addClass('topBar-colored');
    $('.topBarInner').addClass('topBarInner-colored');
}

相关内容

最新更新

热门标签：