JQuery面板隐藏

时间：2017-06-04 19:10:39

标签： javascript jquery html

我无法使用简单的面板隐藏脚本。它适用于MLAWebsite的面板，但是当我点击MLAJournal按钮时没有任何反应？我已经尝试了所有我能想到的东西，现在看了很多，似乎无法弄明白。

相关的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>
  	<head>
   	<base target="_top">
    	<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>
        
    	<style>
    	.branding-below {
      		bottom: 56px;
      		top: 0;
    	}

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

    	.col-contain {
      		overflow: hidden;
    	}

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

    	.logo {
      		vertical-align: middle;
    	}

    	.radio-spacer {
      		height: 20px;
    	}

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

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

3 个答案:

答案 0 :(得分：3)

你错过了#。

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

    //currentStep = 1;
});

答案 1 :(得分：1)

将#放在$("btnMLAJournal").click(function(){

上

＆＃13;
＆＃13; 
$(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;
    });
   
});
＆＃13; 
<!DOCTYPE html>
<html>
  	<head>
   	<base target="_top">
    	<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>
        
    	<style>
    	.branding-below {
      		bottom: 56px;
      		top: 0;
    	}

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

    	.col-contain {
      		overflow: hidden;
    	}

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

    	.logo {
      		vertical-align: middle;
    	}

    	.radio-spacer {
      		height: 20px;
    	}

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

  	<body>
    	<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>     	
  	</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

您已将id btnMLAJournal 添加到您的按钮，并且jquery中来自id的调用元素需要带有id的#，在您的情况下会丢失。 只需在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>
  	<head>
   	<base target="_top">
    	<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>
        
    	<style>
    	.branding-below {
      		bottom: 56px;
      		top: 0;
    	}

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

    	.col-contain {
      		overflow: hidden;
    	}

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

    	.logo {
      		vertical-align: middle;
    	}

    	.radio-spacer {
      		height: 20px;
    	}

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

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

相关问题
最新问题