JS编码不适用于多个页面(JS coding won't work on more than one page)
我是新手，并且能够让我的代码在我的第一页上工作，但不能在其他任何页面上工作。 我尝试将其作为导出的js文件，但它不起作用，所以我将其添加为我的html页面底部。 现在它只是在那个页面上没有工作！ 所以这个有效：
* {
font-family: Helvetica, sans-serif;
}
body {
background-position: bottom;
font-family: Arial, Helvetica, sans-serif;
background-color: #e9e9e9;
}
img.sixth {
display: block;
margin: auto;
margin-bottom: 4em;
}
h1.first {
text-align: center;
font-family: arial, helvetica, sans-serif;
padding:10px;
border: Dashed 3px;
border-color: #66CCFF;
width: 300px;
height: auto;
position: static;
margin: 30px;
margin-left: 500px;
margin-top: 40px;
}
h2 {
text-align: center;
font-family: arial, helvetica, sans-serif;
padding:10px;
border: Dashed 3px;
border-color: #66FF66;
width: 300px;
height: auto;
margin: auto;
cursor: pointer;
margin-top: 1.5em;
}
img.first {
display: block;
margin: auto;
margin-bottom: 2em;
display: none;
}
img.second {
display: block;
margin: auto;
display: none;
}
img.third {
display: block;
margin: auto;
display: none;
}
img.fourth {
display: block;
margin: auto;
margin-bottom: 1em;
display: none;
}
img.fifth {
display: block;
margin: auto;
display: none;
}
p {
text-align: center;
font-family: arial, helvetica, sans-serif;
visibility:hidden;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="densi.js"></script>
<link rel="stylesheet" href="C:\Users\Hayley\Documents\Coding\DENSI\densi_home.css">
<title> DENSI 2017 </title>
</head>
<body>
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<script>
$(function(){
$("#nav-placeholder").load("nav1.htm")
;
});
</script>
<!--Finish NavBar-->
<!--Page Heading-->
<div id='heading'>
<h1 class='first' align='center'><big> DENSI 2017 </h1 class='first' align='center'></big>
</div>
<img class='sixth' src="C:\Users\Hayley\Documents\Coding\DENSI\DEN.jpg"
height="200px"
width="250px"
border="1px"
position="center"
alt=""/>
<!--Section 1-->
<div class="parent">
<h2 align='center'> What is it? </h2>
<p align='center'> DENSI stands for Discovery Education Network Summer Institute. It is a week long residential professional development that helps educators learn, share and connect with other educators about good practice; integrating technology into the classroom and to give different perspectives on strategies to engage children. </p>
<img class='second' src="C:\Users\Hayley\Documents\Coding\DENSI\DENSI.jpg" alt="DEN Group Photo"
height="150px"
width="270px"
border="1px"
style="float: left; margin-left: 30%; margin-bottom:0.5em; margin-top: 3em;"
/>
<img class='third' src="C:\Users\Hayley\Documents\Coding\DENSI\densi logo.jpg" alt="Discovery Logo"
height="250px"
width="180px"
border="1px"
style="float: right; margin-right: 30%; margin-bottom: 1em;"
/>
<p style="clear: both;"></p>
</div>
<!--Section 2-->
<div class="parent">
<h2 align='center'> Where was it held? </h2>
<p align='center'> DENSI this year was held in San Diego at the University of California San Diego. In previous years it has been held in Washington, Chicago and Montana. San Diego has been a beautiful setting for DENSI this year (although there was no air con... and the wifi was a struggle...); once we had adjusted to the heat and the time difference we were well on our way to starting our once in a lifetime professional development experience!</p>
<img class='fourth' src="C:\Users\Hayley\Documents\Coding\DENSI\15.jpg"
height="250px"
width="180px"
border="1px"
alt=""/>
</div>
<!--Section 3-->
<div class="parent">
<h2 class='third'align='center'> Who was there? </h2>
<p class='third' align='center'> There were over 150 attendees at DENSI this year, several of which travelled from Egypt, England, UAE, Dubai, Haiti, Kuwait and China. Information on attendees can be found <span style="cursor:pointer"><a href="https://docs.google.com/presentation/d/1K_mloa69fSR0ij0E7u1pjG_RkCzLxMUTk7JlLd04J2Y/edit"
target="_blank">here.</a>
<p class='fourth' align='center'>
Over the course of the week we had networked with the majority and had connected with many.</p>
<img class='first' src="C:\Users\Hayley\Documents\Coding\DENSI\Int1.jpg" alt="Internation Group Photo"
height="180px"
width="250px"
border="1px"
style="float: inherit; margin-right: 40%; margin-bottom: 5em;"
/>
</div>
<!--Footer-->
<div id="footer">
<script>
$(function(){
$("#footer").load("footer.htm")
;
});
</script>
</div>
<script>
$(".parent").children("h2").click(function(){
$(".parent").children("p", "img.first", "img.second", "img.third", "img.fourth", "img.fifth").css("visibility", "hidden");
$(this).siblings("p", "img.first", "img.second", "img.third", "img.fourth", "img.fifth").css("visibility", "visible");
$(".parent").children("img.first").css("display", "none");
$(this).siblings("img.first").css("display", "block");
$(".parent").children("img.second").css("display", "none");
$(this).siblings("img.second").css("display", "block");
$(".parent").children("img.third").css("display", "none");
$(this).siblings("img.third").css("display", "block");
$(".parent").children("img.fourth").css("display", "none");
$(this).siblings("img.fourth").css("display", "block");
$(".parent").children("img.fifth").css("display", "none");
$(this).siblings("img.fifth").css("display", "block");
});
</script>
</body
</html>
但是我尝试的这一个和每一个都不会：
body {
background-position: bottom;
font-family: Arial, Helvetica, sans-serif;
background-color: #e9e9e9;
}
h1.first {
text-align: center;
font-family: arial, helvetica, sans-serif;
padding:10px;
border: Dashed 3px;
border-color: #66CCFF;
width: 300px;
height: auto;
position: static;
margin: 30px;
margin-left: 500px;
margin-top: 40px;
}
h2 {
text-align: center;
font-family: arial, helvetica, sans-serif;
padding:10px;
border: Dashed 3px;
border-color: #66FF66;
width: 300px;
height: auto;
margin: auto;
cursor: pointer;
}
img.first {
display: none;
margin: auto;
}
img.second{
display: none;
margin: auto;
}
img.third{
display: none;
margin: auto;
}
img.fourth{
display: none;
margin: auto;
}
img.fifth{
display: none;
margin: auto;
}
img.eight{
display: none;
margin: auto;
}
img.ninth{
display: none;
margin: auto;
}
img.tenth{
display: none;
margin: auto;
}
img.eleventh{
display: none;
margin: auto;
}
p {
text-align: center;
font-family: arial, helvetica, sans-serif;
font-size: 11.8pt;
visibility: hidden;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="C:\Users\Hayley\Documents\Coding\DENSI\day1.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<title> Day One </title>
</head>
<body>
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<script>
$(function(){
$("#nav-placeholder").load("nav1.htm")
;
});
</script>
<!-- Heading-->
<h1 class='first' align='center'><big> Day One </h1></big>
<!-- Section One-->
<div class="parent">
<h2 align='center'> Small Group </h2>
<p align='center'> My small group leader was Jen Hall. She was amazing, she saved Nik and I seats so that we were able to meet our small group and made us feel welcome. Our small group were accommodating and likeable. In our small group was Dana, Cheryl, Mary, Leslie, Alexis, Nadine, Chelsea, Kimberly, Lauren, Renee and Lakesha. </p>
<img class='first' src="C:\Users\Hayley\Documents\Coding\DENSI\IMG_0088.jpg" alt="Our Small Group 1"
height="130px"
width="200px"
border="1px"
style="float: left; margin-left: 17%; margin-bottom:0.5em; margin-top: 1em;"
/>
<img class='third' src="C:\Users\Hayley\Documents\Coding\DENSI\IMG_0090.jpg" alt="Our Small Group 2"
height="130px"
width="200px"
border="1px"
style="float: left; margin-left: 10%; margin-bottom:0.5em; margin-top: 1em;"
/>
<img class='second' src="C:\Users\Hayley\Documents\Coding\DENSI\IMG_0089.jpg" alt="Our Small Group 3"
height="130px"
width="200px"
border="1px"
style="float: left; margin-left: 10%; margin-bottom:0.5em; margin-top: 1em;"
/>
<p style="clear: both;"></p>
</div>
<!--Section Two-->
<div id='parent'>
<h2 align='center'> What Did We Do? </h2>
<p> We started off with an opening session. In this session there was a video introducing a new country to the group made by the attendees from that country, and there were discussions about someone people had connected with the previous day as well as the timetable for the day. In the morning we had a session let by Jaime LaForgia and then it was lunch time! <br/> I didn't realise how much I was going to like American food. Turns out it is A LOT.</p>
<img class='fourth' src="C:\Users\Hayley\Documents\Coding\DENSI\14.jpg"
height="200px"
width="150px"
border="1px"
style="float: left; margin-left: 10%; margin-bottom: 5em;"
alt="American Food"/>
<img class='fifth' src="C:\Users\Hayley\Documents\Coding\DENSI\42.jpg"
height="200px"
width="150px"
border="1px"
style="float: left; margin-left: 10%; margin-bottom: 5em;"
alt="American Food"/>
<img class='eight' src="C:\Users\Hayley\Documents\Coding\DENSI\68.jpg"
height="200px"
width="150px"
border="1px"
style="float: left; margin-left: 10%; margin-bottom: 5em;"
alt="American Food"/>
<img class='ninth' src="C:\Users\Hayley\Documents\Coding\DENSI\69.jpg"
height="200px"
width="150px"
border="1px"
style="float: left; margin-left: 10%; margin-bottom: 5em;"
alt="American Food"/>
<p style="clear: both;"></p>
</div>
<!--Section 3-->
<div id='parent'>
<h2 align='center'> International Group </h2>
<p> In the afternoon we went to a different building to be part of the international group meet up. Firstly, we looked at and discussed a powerpoint led by Lance about SOS and how to improve the Discovery software and services in front of the CEO, Bill Goodwyn. While in the room we had to introduce ourselves; say our name, where we worked, discuss our school community and/or how we use Discovery software in our school. Except I didn't. I stayed quiet, sat back in my chair and took in everything everyone else was saying, listened and just did not introduce myself; because I don't enjoy big groups. Thankfully, Christine let me get away with this, saved me the embarrassment and let me stay in my comfort zone. </p>
</div>
<!--Section 4-->
<div id='parent'>
<h2 align='center'> The DEN at Night... </h2>
<p> At night, the DEN becomes a different place. It becomes less professional and more... personal and party-vibey. Alcohol is found and everyone becomes less tense, people relax, make friends, network in ways we can't during the day. During the DEN at Night I made friends with an awesome group of people, including Kelli, Heather and Kamala. These are my newest life-long friends.:)</p>
<img class='tenth' src="C:\Users\Hayley\Documents\Coding\DENSI\13.jpg"
height="150px"
width="250px"
border="1px"
style="float: left; margin-left: 30%; margin-bottom: 5em;"
alt="American Friends and I"/>
<img class='eleventh' src="C:\Users\Hayley\Documents\Coding\DENSI\72.jpg"
height="250px"
width="150px"
border="1px"
style="float: left; margin-left: 10%; margin-bottom: 5em;"
alt="American Friends and I"/>
<p style="clear: both;"></p>
</div>
<!--Footer-->
<div id="footer">
</div>
<script>
$(function(){
$("#footer").load("footer.htm")
;
});
</script>
<script>
$(".parent").children("h2").click(function(){
$(".parent").children("p").css("visibility", "hidden");
$(this).siblings("p").css("visibility", "visible");
$(".parent").children("img.first", "img.second", "img.third").css("display", "block");
$(this).siblings("img.first", "img.second", "img.third").css("display", "block");
$(".parent").children("img.fourth", "img.fifth", "img.eight", "img.ninth").css("display", "block");
$(this).siblings("img.fourth", "img.fifth", "img.eight", "img.ninth").css("display", "block");
$(".parent").children("img.fourth", "img.fifth", "img.eight", "img.ninth").css("display", "block");
$(this).siblings("img.tenth", "img.eleventh").css("display", "block");
});
</body>
</html>
I'm new at this and have been able to get my code to work on my first page but not on any others. I tried to do it as an exported js file but it wouldn't work so I added it as a at the the bottom of my html page. Now it just isn't working except on that one page! So this one works:
* {
font-family: Helvetica, sans-serif;
}
body {
background-position: bottom;
font-family: Arial, Helvetica, sans-serif;
background-color: #e9e9e9;
}
img.sixth {
display: block;
margin: auto;
margin-bottom: 4em;
}
h1.first {
text-align: center;
font-family: arial, helvetica, sans-serif;
padding:10px;
border: Dashed 3px;
border-color: #66CCFF;
width: 300px;
height: auto;
position: static;
margin: 30px;
margin-left: 500px;
margin-top: 40px;
}
h2 {
text-align: center;
font-family: arial, helvetica, sans-serif;
padding:10px;
border: Dashed 3px;
border-color: #66FF66;
width: 300px;
height: auto;
margin: auto;
cursor: pointer;
margin-top: 1.5em;
}
img.first {
display: block;
margin: auto;
margin-bottom: 2em;
display: none;
}
img.second {
display: block;
margin: auto;
display: none;
}
img.third {
display: block;
margin: auto;
display: none;
}
img.fourth {
display: block;
margin: auto;
margin-bottom: 1em;
display: none;
}
img.fifth {
display: block;
margin: auto;
display: none;
}
p {
text-align: center;
font-family: arial, helvetica, sans-serif;
visibility:hidden;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="densi.js"></script>
<link rel="stylesheet" href="C:\Users\Hayley\Documents\Coding\DENSI\densi_home.css">
<title> DENSI 2017 </title>
</head>
<body>
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<script>
$(function(){
$("#nav-placeholder").load("nav1.htm")
;
});
</script>
<!--Finish NavBar-->
<!--Page Heading-->
<div id='heading'>
<h1 class='first' align='center'><big> DENSI 2017 </h1 class='first' align='center'></big>
</div>
<img class='sixth' src="C:\Users\Hayley\Documents\Coding\DENSI\DEN.jpg"
height="200px"
width="250px"
border="1px"
position="center"
alt=""/>
<!--Section 1-->
<div class="parent">
<h2 align='center'> What is it? </h2>
<p align='center'> DENSI stands for Discovery Education Network Summer Institute. It is a week long residential professional development that helps educators learn, share and connect with other educators about good practice; integrating technology into the classroom and to give different perspectives on strategies to engage children. </p>
<img class='second' src="C:\Users\Hayley\Documents\Coding\DENSI\DENSI.jpg" alt="DEN Group Photo"
height="150px"
width="270px"
border="1px"
style="float: left; margin-left: 30%; margin-bottom:0.5em; margin-top: 3em;"
/>
<img class='third' src="C:\Users\Hayley\Documents\Coding\DENSI\densi logo.jpg" alt="Discovery Logo"
height="250px"
width="180px"
border="1px"
style="float: right; margin-right: 30%; margin-bottom: 1em;"
/>
<p style="clear: both;"></p>
</div>
<!--Section 2-->
<div class="parent">
<h2 align='center'> Where was it held? </h2>
<p align='center'> DENSI this year was held in San Diego at the University of California San Diego. In previous years it has been held in Washington, Chicago and Montana. San Diego has been a beautiful setting for DENSI this year (although there was no air con... and the wifi was a struggle...); once we had adjusted to the heat and the time difference we were well on our way to starting our once in a lifetime professional development experience!</p>
<img class='fourth' src="C:\Users\Hayley\Documents\Coding\DENSI\15.jpg"
height="250px"
width="180px"
border="1px"
alt=""/>
</div>
<!--Section 3-->
<div class="parent">
<h2 class='third'align='center'> Who was there? </h2>
<p class='third' align='center'> There were over 150 attendees at DENSI this year, several of which travelled from Egypt, England, UAE, Dubai, Haiti, Kuwait and China. Information on attendees can be found <span style="cursor:pointer"><a href="https://docs.google.com/presentation/d/1K_mloa69fSR0ij0E7u1pjG_RkCzLxMUTk7JlLd04J2Y/edit"
target="_blank">here.</a>
<p class='fourth' align='center'>
Over the course of the week we had networked with the majority and had connected with many.</p>
<img class='first' src="C:\Users\Hayley\Documents\Coding\DENSI\Int1.jpg" alt="Internation Group Photo"
height="180px"
width="250px"
border="1px"
style="float: inherit; margin-right: 40%; margin-bottom: 5em;"
/>
</div>
<!--Footer-->
<div id="footer">
<script>
$(function(){
$("#footer").load("footer.htm")
;
});
</script>
</div>
<script>
$(".parent").children("h2").click(function(){
$(".parent").children("p", "img.first", "img.second", "img.third", "img.fourth", "img.fifth").css("visibility", "hidden");
$(this).siblings("p", "img.first", "img.second", "img.third", "img.fourth", "img.fifth").css("visibility", "visible");
$(".parent").children("img.first").css("display", "none");
$(this).siblings("img.first").css("display", "block");
$(".parent").children("img.second").css("display", "none");
$(this).siblings("img.second").css("display", "block");
$(".parent").children("img.third").css("display", "none");
$(this).siblings("img.third").css("display", "block");
$(".parent").children("img.fourth").css("display", "none");
$(this).siblings("img.fourth").css("display", "block");
$(".parent").children("img.fifth").css("display", "none");
$(this).siblings("img.fifth").css("display", "block");
});
</script>
</body
</html>
But this one and every other one I try won't:
body {
background-position: bottom;
font-family: Arial, Helvetica, sans-serif;
background-color: #e9e9e9;
}
h1.first {
text-align: center;
font-family: arial, helvetica, sans-serif;
padding:10px;
border: Dashed 3px;
border-color: #66CCFF;
width: 300px;
height: auto;
position: static;
margin: 30px;
margin-left: 500px;
margin-top: 40px;
}
h2 {
text-align: center;
font-family: arial, helvetica, sans-serif;
padding:10px;
border: Dashed 3px;
border-color: #66FF66;
width: 300px;
height: auto;
margin: auto;
cursor: pointer;
}
img.first {
display: none;
margin: auto;
}
img.second{
display: none;
margin: auto;
}
img.third{
display: none;
margin: auto;
}
img.fourth{
display: none;
margin: auto;
}
img.fifth{
display: none;
margin: auto;
}
img.eight{
display: none;
margin: auto;
}
img.ninth{
display: none;
margin: auto;
}
img.tenth{
display: none;
margin: auto;
}
img.eleventh{
display: none;
margin: auto;
}
p {
text-align: center;
font-family: arial, helvetica, sans-serif;
font-size: 11.8pt;
visibility: hidden;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="C:\Users\Hayley\Documents\Coding\DENSI\day1.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<title> Day One </title>
</head>
<body>
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<script>
$(function(){
$("#nav-placeholder").load("nav1.htm")
;
});
</script>
<!-- Heading-->
<h1 class='first' align='center'><big> Day One </h1></big>
<!-- Section One-->
<div class="parent">
<h2 align='center'> Small Group </h2>
<p align='center'> My small group leader was Jen Hall. She was amazing, she saved Nik and I seats so that we were able to meet our small group and made us feel welcome. Our small group were accommodating and likeable. In our small group was Dana, Cheryl, Mary, Leslie, Alexis, Nadine, Chelsea, Kimberly, Lauren, Renee and Lakesha. </p>
<img class='first' src="C:\Users\Hayley\Documents\Coding\DENSI\IMG_0088.jpg" alt="Our Small Group 1"
height="130px"
width="200px"
border="1px"
style="float: left; margin-left: 17%; margin-bottom:0.5em; margin-top: 1em;"
/>
<img class='third' src="C:\Users\Hayley\Documents\Coding\DENSI\IMG_0090.jpg" alt="Our Small Group 2"
height="130px"
width="200px"
border="1px"
style="float: left; margin-left: 10%; margin-bottom:0.5em; margin-top: 1em;"
/>
<img class='second' src="C:\Users\Hayley\Documents\Coding\DENSI\IMG_0089.jpg" alt="Our Small Group 3"
height="130px"
width="200px"
border="1px"
style="float: left; margin-left: 10%; margin-bottom:0.5em; margin-top: 1em;"
/>
<p style="clear: both;"></p>
</div>
<!--Section Two-->
<div id='parent'>
<h2 align='center'> What Did We Do? </h2>
<p> We started off with an opening session. In this session there was a video introducing a new country to the group made by the attendees from that country, and there were discussions about someone people had connected with the previous day as well as the timetable for the day. In the morning we had a session let by Jaime LaForgia and then it was lunch time! <br/> I didn't realise how much I was going to like American food. Turns out it is A LOT.</p>
<img class='fourth' src="C:\Users\Hayley\Documents\Coding\DENSI\14.jpg"
height="200px"
width="150px"
border="1px"
style="float: left; margin-left: 10%; margin-bottom: 5em;"
alt="American Food"/>
<img class='fifth' src="C:\Users\Hayley\Documents\Coding\DENSI\42.jpg"
height="200px"
width="150px"
border="1px"
style="float: left; margin-left: 10%; margin-bottom: 5em;"
alt="American Food"/>
<img class='eight' src="C:\Users\Hayley\Documents\Coding\DENSI\68.jpg"
height="200px"
width="150px"
border="1px"
style="float: left; margin-left: 10%; margin-bottom: 5em;"
alt="American Food"/>
<img class='ninth' src="C:\Users\Hayley\Documents\Coding\DENSI\69.jpg"
height="200px"
width="150px"
border="1px"
style="float: left; margin-left: 10%; margin-bottom: 5em;"
alt="American Food"/>
<p style="clear: both;"></p>
</div>
<!--Section 3-->
<div id='parent'>
<h2 align='center'> International Group </h2>
<p> In the afternoon we went to a different building to be part of the international group meet up. Firstly, we looked at and discussed a powerpoint led by Lance about SOS and how to improve the Discovery software and services in front of the CEO, Bill Goodwyn. While in the room we had to introduce ourselves; say our name, where we worked, discuss our school community and/or how we use Discovery software in our school. Except I didn't. I stayed quiet, sat back in my chair and took in everything everyone else was saying, listened and just did not introduce myself; because I don't enjoy big groups. Thankfully, Christine let me get away with this, saved me the embarrassment and let me stay in my comfort zone. </p>
</div>
<!--Section 4-->
<div id='parent'>
<h2 align='center'> The DEN at Night... </h2>
<p> At night, the DEN becomes a different place. It becomes less professional and more... personal and party-vibey. Alcohol is found and everyone becomes less tense, people relax, make friends, network in ways we can't during the day. During the DEN at Night I made friends with an awesome group of people, including Kelli, Heather and Kamala. These are my newest life-long friends.:)</p>
<img class='tenth' src="C:\Users\Hayley\Documents\Coding\DENSI\13.jpg"
height="150px"
width="250px"
border="1px"
style="float: left; margin-left: 30%; margin-bottom: 5em;"
alt="American Friends and I"/>
<img class='eleventh' src="C:\Users\Hayley\Documents\Coding\DENSI\72.jpg"
height="250px"
width="150px"
border="1px"
style="float: left; margin-left: 10%; margin-bottom: 5em;"
alt="American Friends and I"/>
<p style="clear: both;"></p>
</div>
<!--Footer-->
<div id="footer">
</div>
<script>
$(function(){
$("#footer").load("footer.htm")
;
});
</script>
<script>
$(".parent").children("h2").click(function(){
$(".parent").children("p").css("visibility", "hidden");
$(this).siblings("p").css("visibility", "visible");
$(".parent").children("img.first", "img.second", "img.third").css("display", "block");
$(this).siblings("img.first", "img.second", "img.third").css("display", "block");
$(".parent").children("img.fourth", "img.fifth", "img.eight", "img.ninth").css("display", "block");
$(this).siblings("img.fourth", "img.fifth", "img.eight", "img.ninth").css("display", "block");
$(".parent").children("img.fourth", "img.fifth", "img.eight", "img.ninth").css("display", "block");
$(this).siblings("img.tenth", "img.eleventh").css("display", "block");
});
</body>
</html>
最满意答案
使用jQuery您需要使用.ready事件。 一旦DOM准备好（文档对象模型），就会运行此事件。
所以你的脚本代码应该是
$(document).ready(function()
{
$(".parent").children("h2").click(function(){
$(".parent").children("p", "img.first", "img.second", "img.third", "img.fourth", "img.fifth").css("visibility", "hidden");
$(this).siblings("p", "img.first", "img.second", "img.third", "img.fourth", "img.fifth").css("visibility", "visible");
$(".parent").children("img.first").css("display", "none");
$(this).siblings("img.first").css("display", "block");
$(".parent").children("img.second").css("display", "none");
$(this).siblings("img.second").css("display", "block");
$(".parent").children("img.third").css("display", "none");
$(this).siblings("img.third").css("display", "block");
$(".parent").children("img.fourth").css("display", "none");
$(this).siblings("img.fourth").css("display", "block");
$(".parent").children("img.fifth").css("display", "none");
$(this).siblings("img.fifth").css("display", "block");
});
});
您应该做的是将此代码保存到.js文件中，并在标题中引用它
<script src="DisplayContents.js"></script>
将脚本链接到您的文件，您需要提供其位置，就像您的img src位置一样。
同样为了showing和hiding元素，为什么不尝试.show()和.show()这些都是jQuery函数。
此外，如果您按F12键，您将获得一个浏览器控制台窗口。 您可以使用它来帮助查找您的页面/网站可能存在的任何问题。
---更新---
jsFiddle链接： https ：//jsfiddle.net/vvof6s1r/
CSS
* {
font-family: Helvetica, sans-serif;
}
body {
background-position: bottom;
font-family: Arial, Helvetica, sans-serif;
background-color: #e9e9e9;
}
img.sixth {
margin: auto;
margin-bottom: 4em;
}
h1.first {
text-align: center;
font-family: arial, helvetica, sans-serif;
padding: 10px;
border: Dashed 3px;
border-color: #66CCFF;
width: 300px;
height: auto;
position: static;
margin: 30px;
margin-left: 500px;
margin-top: 40px;
}
h2 {
text-align: center;
font-family: arial, helvetica, sans-serif;
padding: 10px;
border: Dashed 3px;
border-color: #66FF66;
width: 300px;
height: auto;
margin: auto;
cursor: pointer;
margin-top: 1.5em;
}
img.first {
margin: auto;
margin-bottom: 2em;
}
img.second {
margin: auto;
}
img.third {
margin: auto;
}
img.fourth {
margin: auto;
margin-bottom: 1em;
}
img.fifth {
margin: auto;
}
p {
text-align: center;
font-family: arial, helvetica, sans-serif;
visibility: hidden;
}
HTML
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<!--Finish NavBar-->
<!--Page Heading-->
<div id='heading'>
<h1 class='first' align='center'>DENSI 2017 </h1>
</div>
<img class='sixth' src="http://via.placeholder.com/200x200" height="200px" width="250px" border="1px" position="center" alt="" />
<!--Section 1-->
<div class="parent">
<h2 align='center' class="display-content-header"> What is it? </h2>
<div class="display-content">
<p align='center'> DENSI stands for Discovery Education Network Summer Institute. It is a week long residential professional development that helps educators learn, share and connect with other educators about good practice; integrating technology into the classroom
and to give different perspectives on strategies to engage children. </p>
<img class='second' src="http://via.placeholder.com/200x200" alt="DEN Group Photo" height="150px" width="270px" border="1px" style="float: left; margin-left: 30%; margin-bottom:0.5em; margin-top: 3em;" />
<img class='third' src="http://via.placeholder.com/200x200" alt="Discovery Logo" height="250px" width="180px" border="1px" style="float: right; margin-right: 30%; margin-bottom: 1em;" />
<p style="clear: both;"></p>
</div>
</div>
<!--Section 2-->
<div class="parent">
<h2 align='center' class="display-content-header"> Where was it held? </h2>
<div class="display-content">
<p align='center'> DENSI this year was held in San Diego at the University of California San Diego. In previous years it has been held in Washington, Chicago and Montana. San Diego has been a beautiful setting for DENSI this year (although there was no air con... and
the wifi was a struggle...); once we had adjusted to the heat and the time difference we were well on our way to starting our once in a lifetime professional development experience!</p>
<img class='fourth' src="http://via.placeholder.com/200x200" height="250px" width="180px" border="1px" alt="" />
</div>
</div>
<!--Section 3-->
<div class="parent">
<h2 align='center' class="display-content-header"> Who was there? </h2>
<div class="display-content">
<p class='third' align='center'> There were over 150 attendees at DENSI this year, several of which travelled from Egypt, England, UAE, Dubai, Haiti, Kuwait and China. Information on attendees can be found <span style="cursor:pointer"><a href="#"
target="_blank">here.</a> </span>
<p class='fourth' align='center'>
Over the course of the week we had networked with the majority and had connected with many.</p>
<img class='first' src="http://via.placeholder.com/200x200" alt="Internation Group Photo" height="180px" width="250px" border="1px" style="float: inherit; margin-right: 40%; margin-bottom: 5em;" />
</div>
</div>
JQuery的
$(function() {
$('.display-content').hide();
$('.display-content-header').on('click', function() {
$('.display-content').hide();
$(this).parent().find('.display-content').show();
});
});
我必须在jsfiddle示例中更改您的HTML，以便您至少可以看到图像。 我将很快完成代码。
首先在DOM就绪，我们只需使用类名display-content定位所有元素并隐藏它（因此您不需要使用CSS来设置图像样式）。
然后我们所做的就是，如果用户点击任何带有类名称display-content-header元素，我们首先找到所有带有类名称display-content元素并隐藏它（我们这样做，所以他们只能有一个父类扩展为一段时间）。 然后使用当前点击事件，我们可以向上移动父项，然后查找其内容，然后只显示它。
因此，此脚本的HTML应该如下所示
<div>
<h2 class="display-content-header">Header Title 2</h2>
<div class="display-content">
Here is some content
</div>
</div>
When using jQuery you will need to use the .ready event. This event is ran once the DOM is ready (Document Object Model).
So your script code should be
$(document).ready(function()
{
$(".parent").children("h2").click(function(){
$(".parent").children("p", "img.first", "img.second", "img.third", "img.fourth", "img.fifth").css("visibility", "hidden");
$(this).siblings("p", "img.first", "img.second", "img.third", "img.fourth", "img.fifth").css("visibility", "visible");
$(".parent").children("img.first").css("display", "none");
$(this).siblings("img.first").css("display", "block");
$(".parent").children("img.second").css("display", "none");
$(this).siblings("img.second").css("display", "block");
$(".parent").children("img.third").css("display", "none");
$(this).siblings("img.third").css("display", "block");
$(".parent").children("img.fourth").css("display", "none");
$(this).siblings("img.fourth").css("display", "block");
$(".parent").children("img.fifth").css("display", "none");
$(this).siblings("img.fifth").css("display", "block");
});
});
What you should probably do is save this code into a .js file and reference that in your header like so
<script src="DisplayContents.js"></script>
The linking the script to your file you will need to provide its location just like your img src locations.
Also for showing and hiding elements why not try .hide() and .show() these are both jQuery functions.
Also if you press the F12 key you will be given a browser console window. You can use this to help find any problems your page/site may have.
--- Update ---
jsFiddle link: https://jsfiddle.net/vvof6s1r/
CSS
* {
font-family: Helvetica, sans-serif;
}
body {
background-position: bottom;
font-family: Arial, Helvetica, sans-serif;
background-color: #e9e9e9;
}
img.sixth {
margin: auto;
margin-bottom: 4em;
}
h1.first {
text-align: center;
font-family: arial, helvetica, sans-serif;
padding: 10px;
border: Dashed 3px;
border-color: #66CCFF;
width: 300px;
height: auto;
position: static;
margin: 30px;
margin-left: 500px;
margin-top: 40px;
}
h2 {
text-align: center;
font-family: arial, helvetica, sans-serif;
padding: 10px;
border: Dashed 3px;
border-color: #66FF66;
width: 300px;
height: auto;
margin: auto;
cursor: pointer;
margin-top: 1.5em;
}
img.first {
margin: auto;
margin-bottom: 2em;
}
img.second {
margin: auto;
}
img.third {
margin: auto;
}
img.fourth {
margin: auto;
margin-bottom: 1em;
}
img.fifth {
margin: auto;
}
p {
text-align: center;
font-family: arial, helvetica, sans-serif;
visibility: hidden;
}
HTML
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<!--Finish NavBar-->
<!--Page Heading-->
<div id='heading'>
<h1 class='first' align='center'>DENSI 2017 </h1>
</div>
<img class='sixth' src="http://via.placeholder.com/200x200" height="200px" width="250px" border="1px" position="center" alt="" />
<!--Section 1-->
<div class="parent">
<h2 align='center' class="display-content-header"> What is it? </h2>
<div class="display-content">
<p align='center'> DENSI stands for Discovery Education Network Summer Institute. It is a week long residential professional development that helps educators learn, share and connect with other educators about good practice; integrating technology into the classroom
and to give different perspectives on strategies to engage children. </p>
<img class='second' src="http://via.placeholder.com/200x200" alt="DEN Group Photo" height="150px" width="270px" border="1px" style="float: left; margin-left: 30%; margin-bottom:0.5em; margin-top: 3em;" />
<img class='third' src="http://via.placeholder.com/200x200" alt="Discovery Logo" height="250px" width="180px" border="1px" style="float: right; margin-right: 30%; margin-bottom: 1em;" />
<p style="clear: both;"></p>
</div>
</div>
<!--Section 2-->
<div class="parent">
<h2 align='center' class="display-content-header"> Where was it held? </h2>
<div class="display-content">
<p align='center'> DENSI this year was held in San Diego at the University of California San Diego. In previous years it has been held in Washington, Chicago and Montana. San Diego has been a beautiful setting for DENSI this year (although there was no air con... and
the wifi was a struggle...); once we had adjusted to the heat and the time difference we were well on our way to starting our once in a lifetime professional development experience!</p>
<img class='fourth' src="http://via.placeholder.com/200x200" height="250px" width="180px" border="1px" alt="" />
</div>
</div>
<!--Section 3-->
<div class="parent">
<h2 align='center' class="display-content-header"> Who was there? </h2>
<div class="display-content">
<p class='third' align='center'> There were over 150 attendees at DENSI this year, several of which travelled from Egypt, England, UAE, Dubai, Haiti, Kuwait and China. Information on attendees can be found <span style="cursor:pointer"><a href="#"
target="_blank">here.</a> </span>
<p class='fourth' align='center'>
Over the course of the week we had networked with the majority and had connected with many.</p>
<img class='first' src="http://via.placeholder.com/200x200" alt="Internation Group Photo" height="180px" width="250px" border="1px" style="float: inherit; margin-right: 40%; margin-bottom: 5em;" />
</div>
</div>
JQuery
$(function() {
$('.display-content').hide();
$('.display-content-header').on('click', function() {
$('.display-content').hide();
$(this).parent().find('.display-content').show();
});
});
I had to change your HTML in the jsfiddle example just so you can atleast see the images. I will quickly just run through the code.
First at DOM ready we just target all elements with the class name display-content and hide it (so you don't need to style the images out with CSS).
Then all we do is, if the user clicks any element with the class name display-content-header we first find all elements with the class name display-content and hide it (we do this so they can only ever have one parent expanded at a time). Then using the current click event we can move up a parent and then find its content and then just display it with show.
So the HTML for this script to work should look like this
<div>
<h2 class="display-content-header">Header Title 2</h2>
<div class="display-content">
Here is some content
</div>
</div>
更多推荐
发布评论