单击后更改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图像，但新图像在第二次点击后恢复为原始图像

回答

相关问题