Question

我只是想让JQuery显示/隐藏div。我尝试过使用Javascript，但仍然无效。我已经过测试，以确保在我的JS脚本中到处都是。它只是不适用，我不知道为什么。感谢您提供任何帮助。

的Javascript

$(document).ready(function() {
  startup();
  $('select').material_select();
  $('ul.tabs').tabs();
  $('.collapsible').collapsible({
    accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
  });
});

function startup() {
  $("#Assignments").hide();
  $("#ClassView").hide();
}

$('.datepicker').pickadate({
  selectMonths: true, // Creates a dropdown to control month
  selectYears: 15 // Creates a dropdown of 15 years to control year
});

function tabswitch(x) {
  if (x == 1) {
    $("#Calender").show();
    $("#Assignments").hide();
    $("#ClassView").hide();
  } else if (x == 2) {
    $("#Calender").hide();
    $("#Assignments").show();
    $("#ClassView").hide();
  } else if (x == 3) {
    $("#Calender").hide();
    $("#Assignments").hide();
    $("#ClassView").show();
  }
}

CSS

#sidebar p {
  text-align: center;
  color: white;
  font-size: 18px;
}
#sideInterior p {
  color: black;
}
.tabs a:link {
  font-family: monospace;
  color: white
}
.tabs a:hover {
  color: gray;
}
.tabs a:visited {
  color: white;
}
.tabs a:active {
  color: white;
}
body {
  background-color: #bdbdbd;
}
.Accordion {
  background-color: white;
}
li {
  margin-left: 5px;
  margin-right: 5px;
}

HTML

<!DOCTYPE <!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="newStyle.css">
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.js'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.js"></script>
  <script type="text/javascript" src="JS.js"></script>
  <meta charset="utf8">
  <title>Scheduling_Main</title>
</head>
<nav>
  <div class="nav-wrapper blue darken-4">
    <a href="#" class="brand-logo">Scheduling Project</a>
    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <li><a href="Profile.html">Profile</a>
      </li>
      <li><a href="Settings.html">Settings</a>
      </li>
      <li><a href="Help.html">Help</a>
      </li>
    </ul>
  </div>
</nav>

<body>
  <div id="2ndNav" class="row nav-wrapper blue">
    <div class="col s3 blue" id="sidebar">
      <p>Add to your schedule
        <p>
    </div>
    <div class="col s9" id="tabSpace">
      <ul class="tabs blue">
        <li class="tab col s3"><a href="#Calender" onclick="tabswitch(1)">Calender</a>
        </li>
        <li class="tab col s3"><a href="#Assignments" onclick="tabswitch(2)">Assignments</a>
        </li>
        <li class="tab col s3"><a href="#ClassView" onclick="tabswitch(3)">Class View</a>
        </li>
        <div class="indicator white" style="z-index:1"></div>
      </ul>
    </div>
  </div>
  <div class="row">
    <!--start of sidebar-->
    <div class="col s3">
      <ul class="collapsible popout" data-collapsible="accordion">
        <li class="Accordion">
          <div class="collapsible-header"><i class="material-icons">add</i>Add semester</div>
          <!--start of "add semester"-->
          <div class="collapsible-body">
            <div class="input-field">
              <input id="Semester_Title" type="text" class="validate">
              <label for="Semester_Title">Semester Title</label>
            </div>
            <div class="startDate">
              <label for="Semester_Start">Start Date</label>
              <input id="Semester_Start" type="date" class="datepicker">
            </div>
            <div class="endDate">
              <label for="Semester_End">End Date</label>
              <input id="Semester_End" type="date" class="datepicker">
            </div>
            <button class="btn waves-effect waves-light" type="submit" name="action">Submit
              <i class="material-icons right">send</i>
            </button>
          </div>
        </li>
        <li class="Accordion">
          <div class="collapsible-header"><i class="material-icons">add</i>Add course</div>
          <!--start of "add course"-->
          <div class="collapsible-body">
            <div class="input-field">
              <select>
                <!--list of semesters go here-->
                <option value="" disabled selected>Choose the semester</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
              </select>
            </div>
            <div class="input-field">
              <input id="Course_ID" type="text" class="validate">
              <label for="Course_ID">Course_ID</label>
            </div>
            <div class="input-field">
              <input id="Course_Title" type="text" class="validate">
              <label for="Course_Title">Course Title</label>
            </div>
            <button class="btn waves-effect waves-light" type="submit" name="action">Submit
              <i class="material-icons right">send</i>
            </button>
          </div>
        </li>
        <li class="Accordion">
          <div class="collapsible-header"><i class="material-icons">add</i>Add assignment</div>
          <!--start of "add assignment"-->
          <div class="collapsible-body">
            <div class="input-field">
              <select class>
                <!--list of classes go here-->
                <option value="" disabled selected>Choose the class</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
              </select>
            </div>
            <div class="input-field">
              <input id="Assignment_Title" type="text" class="validate">
              <label for="Assignment_Title">Assignment Title</label>
            </div>
            <div class="endDate">
              <label for="Due_Date">Due Date</label>
              <input id="Due_Date" type="date" class="datepicker">
            </div>
            <button class="btn waves-effect waves-light" type="submit" name="action">Submit
              <i class="material-icons right">send</i>
            </button>
          </div>
        </li>
      </ul>
    </div>
    <div>
      <!--tab stuff goes here-->
      <div id="#Calender" class="col s9">
        <p>Calender Test</p>
      </div>
      <div id="#Assignments" class="col s9">
        <p>Assignment Test</p>
      </div>
      <div id="#ClassView" class="col s9">
        <p>Class Test</p>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

您的HTML元素不应位于其ID前面#。它只是在CSS选择器中用来引用它们。

替换

<div id="#Assignments" class="col s9">
    <p>Assignment Test</p>
</div>
<div id="#ClassView" class="col s9">
    <p>Class Test</p>
</div>

与

<div id="Assignments" class="col s9">
    <p>Assignment Test</p>
</div>
<div id="ClassView" class="col s9">
    <p>Class Test</p>
</div>

它应该有用。

Answer 2

我已经更改了您的代码。请查看这是否是您想要的：

[在此处输入链接描述] [1]

只需更改ID名称即可。

[1]：https://jsfiddle.net/tyqsa12u/ enter code here

JQuery没有显示/隐藏元素

2 个答案: