クリックではPNG画像を変更しますが、2回目のクリック後に新しい画像が元の画像に戻ります

残念ながら、1行で説明するのは難しいです。ここでクリックではPNG画像を変更しますが、2回目のクリック後に新しい画像が元の画像に戻ります

は私がやろうとしているものです：リストのクリックで

「項目2」、私は黄色のプラスのアイコンとその逆に私の青のプラスアイコンの画像を変更しています。（DONE）
プラスアイコンをマイナスアイコン（DONE）に変更しながらプラスアイコンをクリックすると
が表示されます。そのアイコンをクリックしてヘッダー/ジャンボトロンをアニメートすると、黄色のアイコンが青色のアイコンに戻ります。「アイテム1」をクリックするたびに、「アイテム2」がクリックされると黄色のアイコンがクリックされ、青色のアイコンは青色のままになります。

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

ここ!important CSSでのキーワードと、代わりに選択されたクラスのスタイルを変更するクラスとDOMを更新するとクイックフィックスです。 !importantのキーワードは良い習慣ではありませんが、それは私がこれまでに解決するために見つけた唯一のものです。私は明日それを見て、私がさらに助けることができるかどうか見てみましょう。また、jQueryのリンクを<bodyの部分から<headの部分に移動しました。すべてのライブラリがそこにあるはずです。代わりにbodyの下にローカルjavascriptスクリプトを入れました。 CSSで

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

追加クラス：JSファイルの変更で

.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()機能：

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画像を変更しますが、2回目のクリック後に新しい画像が元の画像に戻ります

答えて

関連する問題