單擊後更改png圖像，但新圖像在第二次點擊後恢復爲原始圖像

對不起，對於囉嗦的標題很難在一行中解釋。單擊後更改png圖像，但新圖像在第二次點擊後恢復爲原始圖像

這裏就是我想要做的事：

在列表中點擊「項目2」，我改變了我的藍加號圖標的圖像轉換成黃加號圖標，反之亦然。（DONE）
點擊加號圖標會將標題/ jumbotron部分向上移動，同時將加號圖標更改爲減號圖標（DONE）
但是，當我點擊列表「項目2」（將藍色圖標更改爲黃色）然後點擊該圖標以向上繪製頁眉/ jumbotron的動畫，黃色圖標變回藍色圖標。我希望黃色圖標在任何時候都保持黃色，點擊「項目2」並點擊藍色圖標隨時保持藍色「項目1」。

//ANIMATE UP/DOWN ON CLICK OF ICON 
 
$(document).ready(function(){ 
 
\t $(".topBarInner").click(function(event){ 
 
\t \t event.preventDefault(); 
 
    
 
\t \t if ($(this).hasClass("clicked")) { 
 
\t \t \t $("#contentContainer").stop().animate({marginTop:"0px"}, 200); 
 
\t \t \t $(".jumbotron, .headerRow").show(200); \t 
 
\t \t \t $(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-up.png)"); 
 
     }else { 
 
\t \t \t $("#contentContainer").stop().animate({marginTop:"160px"}, 200); 
 
\t \t \t $(".jumbotron, .headerRow").hide(200); 
 
\t \t \t $(".topBarInner").css("background-image", "url(http://www.ericnguyen23.com/images/host/arrow-down.png)"); 
 
\t \t } 
 

 
\t \t $(this).toggleClass("clicked"); 
 
\t \t return false; 
 

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

<link href="http://www.ericnguyen23.com/images/host/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
\t <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"> 
 
\t <div class="row"> 
 
     <div class="col-xs-12"> 
 
      <div class="topBar"><div class="topBarInner"></div></div> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="row"> 
 
    \t <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>  
 
     \t </div> 
 
    </div> 
 
</div><!--/container--> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

來源

2017-06-17 Eric Nguyen

這裏有一個快速的解決與CSS !important關鍵字和帶班更新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; 
}

changeColor()功能JS文件的變化：

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'); 
}

來源

2017-06-17 22:26:10

謝謝！差不多了！只要點擊「項目2」，然後點擊「黃色加號圖標」，就會丟失減號。 –

單擊後更改png圖像，但新圖像在第二次點擊後恢復爲原始圖像

回答

相關問題