2017-06-04 14 views
-3

シンプルなパネル非表示スクリプトが機能しなくなっています。 MLAWebsiteのパネルでも動作しますが、MLAJournalボタンをクリックしても何も起こりません。私は考えることができるすべてを試してきましたが、今はかなり見ていて、それを理解できないようです。JQueryパネル非表示

関連jQueryとHTML:

$(document).ready(function(){ 
 
    //var currentStep = 0; 
 
    
 
    $("#MLAJournalpanel").hide(); 
 
    $("#MLAWebsitepanel").hide(); 
 
    
 
    $("btnMLAJournal").click(function(){ 
 
     $("#MLAWebsitepanel").hide(); 
 
     $("#MLAJournalpanel").show(); 
 
     
 
     //currentStep = 1; 
 
    }); 
 
    
 
    $("#btnMLAWebsite").click(function(){ 
 
     $("#MLAJournalpanel").hide(); 
 
     $("#MLAWebsitepanel").show(); 
 
     
 
     //currentStep = 2; 
 
    }); 
 
    
 
});
<!DOCTYPE html> 
 
<html> 
 
    \t <head> 
 
    \t <base target="_top"> 
 
    \t <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css"> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
     <script src="Code.js"></script> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
     
 
    \t <style> 
 
    \t .branding-below { 
 
     \t \t bottom: 56px; 
 
     \t \t top: 0; 
 
    \t } 
 

 
    \t .branding-text { 
 
     \t \t left: 7px; 
 
     \t \t position: relative; 
 
     \t \t top: 3px; 
 
    \t } 
 

 
    \t .col-contain { 
 
     \t \t overflow: hidden; 
 
    \t } 
 

 
    \t .col-one { 
 
     \t \t float: left; 
 
     \t \t width: 50%; 
 
    \t } 
 

 
    \t .logo { 
 
     \t \t vertical-align: middle; 
 
    \t } 
 

 
    \t .radio-spacer { 
 
     \t \t height: 20px; 
 
    \t } 
 

 
    \t .width-100 { 
 
     \t \t width: 100%; 
 
    \t } 
 
    \t </style> 
 
    \t 
 
    \t </head> 
 

 
    \t <body> 
 
    \t <div class="sidebar branding-below">  
 
      <input id="btnMLAJournal" type="button" value="MLA Journal"></input> 
 
      <input id="btnMLAWebsite" type="button" value="MLA Website"></input> 
 
      
 
      <div id="MLAJournalpanel" class="panel"> 
 
       <div class="panel-body"> 
 
        <h2>MLA Journal</h2> 
 
       </div> 
 
      </div> 
 
      
 
      <div id="MLAWebsitepanel" class="panel"> 
 
       <div class="panel-body"> 
 
        <h1>dadadda</h1> 
 
        <p>surprise!"</p> 
 
       </div> 
 
      </div> 
 
      
 
     </div>  \t 
 
    \t </body> 
 
</html>

答えて

3

あなたはそこ#を逃しています。

$("#btnMLAJournal").click(function(){ 
    $("#MLAWebsitepanel").hide(); 
    $("#MLAJournalpanel").show(); 

    //currentStep = 1; 
}); 
+0

に動作します。 +1 –

+0

ええ、私は完全に盲目的にあなたに感謝しています。 –

1

は、あなたがあなたのボタンにID にbtnMLAJournalを与えられたとjQueryのidから要素を呼び出すと、あなたの場合はIDを持つ#を必要としている$("btnMLAJournal").click(function(){

$(document).ready(function(){ 
 
    //var currentStep = 0; 
 
    
 
    $("#MLAJournalpanel").hide(); 
 
    $("#MLAWebsitepanel").hide(); 
 
    
 
    $("#btnMLAJournal").click(function(){ 
 
     $("#MLAWebsitepanel").hide(); 
 
     $("#MLAJournalpanel").show(); 
 
     
 
     //currentStep = 1; 
 
    }); 
 
    
 
    $("#btnMLAWebsite").click(function(){ 
 
     $("#MLAJournalpanel").hide(); 
 
     $("#MLAWebsitepanel").show(); 
 
     
 
     //currentStep = 2; 
 
    }); 
 
    
 
});
<!DOCTYPE html> 
 
<html> 
 
    \t <head> 
 
    \t <base target="_top"> 
 
    \t <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css"> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
     <script src="Code.js"></script> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
     
 
    \t <style> 
 
    \t .branding-below { 
 
     \t \t bottom: 56px; 
 
     \t \t top: 0; 
 
    \t } 
 

 
    \t .branding-text { 
 
     \t \t left: 7px; 
 
     \t \t position: relative; 
 
     \t \t top: 3px; 
 
    \t } 
 

 
    \t .col-contain { 
 
     \t \t overflow: hidden; 
 
    \t } 
 

 
    \t .col-one { 
 
     \t \t float: left; 
 
     \t \t width: 50%; 
 
    \t } 
 

 
    \t .logo { 
 
     \t \t vertical-align: middle; 
 
    \t } 
 

 
    \t .radio-spacer { 
 
     \t \t height: 20px; 
 
    \t } 
 

 
    \t .width-100 { 
 
     \t \t width: 100%; 
 
    \t } 
 
    \t </style> 
 
    \t 
 
    \t </head> 
 

 
    \t <body> 
 
    \t <div class="sidebar branding-below">  
 
      <input id="btnMLAJournal" type="button" value="MLA Journal"></input> 
 
      <input id="btnMLAWebsite" type="button" value="MLA Website"></input> 
 
      
 
      <div id="MLAJournalpanel" class="panel"> 
 
       <div class="panel-body"> 
 
        <h2>MLA Journal</h2> 
 
       </div> 
 
      </div> 
 
      
 
      <div id="MLAWebsitepanel" class="panel"> 
 
       <div class="panel-body"> 
 
        <h1>dadadda</h1> 
 
        <p>surprise!"</p> 
 
       </div> 
 
      </div> 
 
      
 
     </div>  \t 
 
    \t </body> 
 
</html>

+0

うわー、私は目が覚めて、目の2番目のセットに感謝します。 –

0

#を置きます不足している。 だけjqueryの中で自分のIDに#を追加し、それが問題の解決策だ

$(document).ready(function(){ 
 
    //var currentStep = 0; 
 
    
 
    $("#MLAJournalpanel").hide(); 
 
    $("#MLAWebsitepanel").hide(); 
 
    
 
    //# is added here 
 
    $("#btnMLAJournal").click(function(){ 
 
     $("#MLAWebsitepanel").hide(); 
 
     $("#MLAJournalpanel").show(); 
 
     
 
     //currentStep = 1; 
 
    }); 
 
    
 
    $("#btnMLAWebsite").click(function(){ 
 
     $("#MLAJournalpanel").hide(); 
 
     $("#MLAWebsitepanel").show(); 
 
     
 
     //currentStep = 2; 
 
    }); 
 
    
 
});
<!DOCTYPE html> 
 
<html> 
 
    \t <head> 
 
    \t <base target="_top"> 
 
    \t <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css"> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
     <script src="Code.js"></script> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
     
 
    \t <style> 
 
    \t .branding-below { 
 
     \t \t bottom: 56px; 
 
     \t \t top: 0; 
 
    \t } 
 

 
    \t .branding-text { 
 
     \t \t left: 7px; 
 
     \t \t position: relative; 
 
     \t \t top: 3px; 
 
    \t } 
 

 
    \t .col-contain { 
 
     \t \t overflow: hidden; 
 
    \t } 
 

 
    \t .col-one { 
 
     \t \t float: left; 
 
     \t \t width: 50%; 
 
    \t } 
 

 
    \t .logo { 
 
     \t \t vertical-align: middle; 
 
    \t } 
 

 
    \t .radio-spacer { 
 
     \t \t height: 20px; 
 
    \t } 
 

 
    \t .width-100 { 
 
     \t \t width: 100%; 
 
    \t } 
 
    \t </style> 
 
    \t 
 
    \t </head> 
 

 
    \t <body> 
 
    \t <div class="sidebar branding-below">  
 
      <input id="btnMLAJournal" type="button" value="MLA Journal"></input> 
 
      <input id="btnMLAWebsite" type="button" value="MLA Website"></input> 
 
      
 
      <div id="MLAJournalpanel" class="panel"> 
 
       <div class="panel-body"> 
 
        <h2>MLA Journal</h2> 
 
       </div> 
 
      </div> 
 
      
 
      <div id="MLAWebsitepanel" class="panel"> 
 
       <div class="panel-body"> 
 
        <h1>dadadda</h1> 
 
        <p>surprise!"</p> 
 
       </div> 
 
      </div> 
 
      
 
     </div>  \t 
 
    \t </body> 
 
</html>

細かい

関連する問題