如何顯示jquery中的隱藏內容？

Question

我想隱藏所有內容，並在用戶單擊時顯示一些內容。

在錨標記中，我在其id示例之前使用了'scr'： scrhome_screen 。

但是在我要顯示的div標簽中有id home_screen 。

請解釋為什么它不起作用？

hideAll();
showTab("home_screen");

$(document).ready(function() {
  $("a").click(function() {
    var id = $(this).attr('id');
    if(id.substring(0, 3)=="scr"){
        hideAll();
        showTab(id.substring(3,id.length));
    }
  });
});

function hideAll(){
  $('#home_screen').hide();
  $('#sec_screen').hide();
  $('#third_screen').hide(); //this is working
  // document.getElementById("home_screen").style.display = "none"; 
  // document.getElementById("sec_screen").style.display = "none";
  // document.getElementById("third_screen").style.display = "none";
}

function showTab(divName){
  console.log(divName);
  $('#'+divName).show(); // it think this line is not working
} 

----------編輯-------------------我的html代碼

 hideAll(); showTab("home_screen"); $(document).ready(function() { $("a").click(function() { var id = $(this).attr('id'); if(id.substring(0, 3)=="scr"){ hideAll(); showTab(id.substring(3,id.length)); } }); }); function hideAll(){ $('#home_screen').hide(); $('#sec_screen').hide(); $('#third_screen').hide(); //this is working // document.getElementById("home_screen").style.display = "none"; // document.getElementById("sec_screen").style.display = "none"; // document.getElementById("third_screen").style.display = "none"; } function showTab(divName){ console.log(divName); $('#'+divName).show(); // it think this line is not working } 

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet"> <!-- MENU STARTS HERE --> <ul id="menu"> <li><a href="#" id='scrhome_screen'>Home</a></li> <li> <a href="#">New/Open Project</a> <ul class="hidden"> <li><a href="#" id='scrsec_screen'>New Project</a></li> <li><a href="#" id='scrthird_screen'>Open Project</a></li> </ul> </li> <li> <a href="#">Region</a> <!-- <ul class="hidden"> <li><a href="#">submenu 1</a></li> <li><a href="#">submenu 2</a></li> <li><a href="#">submenu 3</a></li> </ul> --> </li> <li><a href="#">Insurance Indices</a></li> <li><a href="#">Insurance Scheme</a></li> <li><a href="#">Help</a></li> </ul> <!-- HOME STARTS HERE --> <div id="home_screen"> <div id="description"> <fieldset> <p class="descriptionHead">Crop-loss Assessment Monitor Toolbox (CAM)</p> <p id="descritionText">CAM toolbox is specifically designed to estimate prevented sowing, sowing failure and yield loss occurring in a geographical area. The tool has been also embedded with financial viability analytics which determines farmers' premium, maximum claim, claim ratio etc. The CAM tool can also be used to test the important indicators to assess the feasibility of an insurance scheme. Moreover, loss assessment from multiple methods also enables a comparison of risk coverage under different technologies and their subsequent effect on the economics of the insurance scheme.</p> </fieldset> </div> <hr id="ver_line" width="1" size="200"> <div id="login_signup"> <fieldset> <p class="descriptionHead">LOGIN</p> <form> <p id="loginBody"> <input type="text" class="loginForm" placeholder="Login Id"><br> <input type="password" class="loginForm" placeholder="Password"><br> <input type="submit" class="loginButton" value="LOGIN"><br><br> </form> Not registered?<br> <a id="registerBtn"><input type="button" class="loginbutton" value="Register here"></a> <br> </p> </fieldset> </div> </div> <!-- 2nd FIELDSETS --> <div id="sec_screen"> <p>another content is here</p> </div> <!-- 3rd FIELDSETS --> <div id="third_screen"> <p>third content is here</p> </div> 

Answer 1

在您的代碼中，此<li><a href="#" id='scrhome_screen')>Home</a></li>寄生是不必要的，這可能是原因。 然后再次<li><a href="#" id='scrthird_screen')>Open Project</a></li>

這是另一個錯誤

<form>
  <p id="loginBody">
    <input type="text" class="loginForm" placeholder="Login Id"><br>
    <input type="password" class="loginForm" placeholder="Password"><br>
    <input type="submit" class="loginButton" value="LOGIN"><br><br>
</form>
Not registered?<br>
<a id="registerBtn"><input type="button" class="loginbutton" value="Register here"></a>
<br>
</p>

標簽關閉順序錯誤

您的js工作正常，我沒有進行任何更改。

順便說一下，在.substr您可以只執行id.substring(3)而不是id.substring(3,id.length)

 hideAll(); showTab("home_screen"); $(document).ready(function() { $("a").click(function() { var id = $(this).attr('id'); if (id.substring(0, 3) == "scr") { hideAll(); showTab(id.substring(3,id.length)); } }); }); function hideAll() { $('#home_screen').hide(); $('#sec_screen').hide(); $('#third_screen').hide(); } function showTab(divName) { $('#' + divName).show(); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="home_screen">home_screen</div> <div id="sec_screen">sec_screen</div> <div id="third_screen">third_screen</div> <a href="#" id="scrhome_screen">home_screen</a> <a href="#" id="scrsec_screen">sec_screen</a> <a href="#" id="scrthird_screen">third_screen</a>