时间戳

首页 > 解决方案 > 如何在 jquery 中显示隐藏的内容？

javascript - 如何在 jquery 中显示隐藏的内容？

问题描述

我想隐藏所有内容并在用户单击时显示一些内容。

在锚标记中，我在其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>

标签： javascriptjquery

解决方案

在您的代码中，这个<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>

推荐阅读