个人中心
gpt4 book ai didi

javascript - JQuery 不显示/隐藏元素

转载 作者：行者123 更新时间：2023-11-28 06:10:41 25 4
gpt4 key购买 nike

我只是想让 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>

最佳答案

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

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

只需更改 ID 名称即可。

[1]:https://jsfiddle.net/tyqsa12u/ 在此处输入代码

关于javascript - JQuery 不显示/隐藏元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36433290/

25 4 0
文章推荐： swift - 停止并重新启动计时器
文章推荐： c++ - 在 C++/Qt 中拆分 Lua 函数调用的混合字符串/数字参数列表
文章推荐： jquery - 滚动时使用 Jquery 更改 Div 宽度
文章推荐： javascript - 当服务器未按照请求的顺序返回数据时，在 Angular 中键入时进行搜索以显示准确的结果？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com