Question

我希望隐藏所有内容并在用户点击时显示一些内容。

在锚标记中，我在其id示例之前使用了'scr'：scrhome_screen。

但是，我要展示的div代码中的代码为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> paranthesis是不需要的，这可能是原因。然后再次<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>

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

1 个答案: