1
JQueryを表示/非表示にするだけです。代わりにJavascriptを使ってみましたが、それでも動作しません。私はJSスクリプトのどこにでも確実に到達するようにテストしました。それは単に適用されていないと私は理由を知らない。何か助けてくれてありがとう。JQueryが要素を表示/非表示にしていません
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>
あなたはスタイルが適用されていることを確認するために、また、ルールはおそらく隠されるためにそれを強制的にそれをオーバーライドしているかのCSSを参照する要素（複数可）を検査したりしようとしたことがあり隠されていない？ – Taplar