JQuery面板隱藏

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

來源

2017-06-04 Ryan Hutton

你缺少#那裏。

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

    //currentStep = 1; 
});

來源

2017-06-04 19:15:49 Botimoo

這就是問題的解決方案。 +1 –

是的，我完全是盲目的謝謝你。 –

把#上$("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>

來源

2017-06-04 19:20:41

哇，我瞎了，謝謝你的第二套眼睛。 –

你給了ID btnMLAJournal到您的按鈕，並呼籲在jQuery的id元素需要#與ID而你的情況不見了。只需添加#到您的ID在jQuery和它會正常工作

$(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>

來源

2017-06-04 19:35:10 Shehzad

JQuery面板隱藏

回答

相關問題