1
Sadece JQuery'nin bir div göster/gizlemeye çalışıyorum. Bunun yerine Javascript kullanmayı denedim ve hala çalışmıyor. JS kodumdaki her yere ulaşıldığından emin olmak için test ettim. Sadece uygulamıyor ve nedenini bilmiyorum. Verebileceğiniz her yardım için teşekkürler.JQuery öğesi gösterilmiyor/gizlenmiyor
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'iniz elemanları kendi kimlikleri önünde # olmamalıdır
<!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>
Eğer stil uygulanmış olan ve ayrıca kuralları muhtemelen gizlenmesine zorlayarak onu geçersiz kılma hangi css görmek için emin olmak için eleman (lar) teftiş denediniz veya saklanma – Taplar