JavaScript 和 JQuery 的 ID 选择器不适用于显示或可见样式
ID selector with JavaScript & JQuery not working with show or visible style
我的基本问题是我正在尝试 select 在 div idual ID 元素中 - 使用 JQuery 或 vanilla JavaScript - 并在不同的时间显示它们点，就像结果的在线 powerpoint 展示。值得注意的是，虽然下面的代码将使用 JQuery，但我已经尝试通过 document.getElementById 和 document.querySelector JavaScript 并将 style.visibility 设置为可见，甚至在JQuery，尝试了 $("[id='']").show() 并将它们放入控制台，但没有任何显示！相同的代码适用于未包含在 div 元素下的 HTML 元素 - 我是否遗漏了什么？但是为什么隐藏元素有效呢？为什么 show 不再有效？我也试过改变它是从源代码还是附近的外部脚本加载到 JQuery 中，并将 JavaScript 放在头部而不是 body （以防万一，尽管 DOM 加载条件，代码引用了它尚未识别的内容）。两者都没有改变。
因此，该功能运行良好 - 下一张和上一张按钮将适当地点击幻灯片编号。单击标题为第 I 阶段（或第 II 阶段 - 我评论了其中一个，因为我没有包括 HTML 的其余部分，它们在 phase1q2、phase1q3 等中不起作用）工作正常。不起作用的实际上是在关键时间点显示这些 HTML 元素，正如我之前所说，它在控制台中不起作用，也不适用于香草 JavaScript。我尝试使用特定 p 元素 id 的代码，例如 phase1intro 和 phase1q1student。我尝试删除带有 row/justify-content/pad 的 div 元素并仅使用 p 元素。如果没有 hideAll 功能，所有内容都显示在段落上，这表明没有 HTML 问题。控制台中也没有错误显示。当我在控制台中 运行 JQuery 时，它显示“jQuery.fn.init [div#phase1intro.row.justify-content-start.pad75.mainfont, prevObject : jQuery.fn.init(1)]”。即，没有错误。与 style.visibility 相同。我已经为此工作了几个小时，但我不知所措 - 我在这里错过了什么？是 div + p 吗？尽管使用 ID selector，我是否需要成为目标？是否每个 p 元素都需要自己的 id 并且我必须 select 它们都 individually 才能显示？这就是我在其他代码中所做的，它工作正常 - 但这似乎真的很浪费 code-wise!
document.addEventListener("DOMContentLoaded", function() {
var Phase = 3;
function hideAll() {
$("#studypurpose").hide();
$("#phase1all").hide();
$("#phase2all").hide();
$("#ViewStudy").hide();
$("#PrevButton").hide();
$("#NextButton").hide();
}
hideAll();
$("a[href='#phase1']").click(function() {
slideNum = 0;
Phase = 1;
hideAll();
$("#preregistration").hide();
$("#phase1intro").show();
$("#phase1groups").show();
$("#ViewStudy").show();
});
$("a[href='#phase2']").click(function() {
slideNum = 0;
Phase = 2;
hideAll();
$("#preregistration").hide();
$("#phase2intro").show();
$("#phase2groups").show();
$("#ViewStudy").show();
});
var slideNum = 0;
var maxNum = 5;
$("#NextButton").on('click', function() {
slideNum = slideNum + 1;
moveShow(slideNum);
});
$("#ViewStudy").on('click', function() {
$("#ViewStudy").hide();
$("#NextButton").show();
moveShow(slideNum);
});
$("#PrevButton").on('click', function() {
slideNum = slideNum - 1;
moveShow(slideNum);
});
function moveShow(slideNum) {
if (slideNum == 0) {
if (Phase == 1) {
$("#phase1q1").show();
} else {
$("#phase2q1").show();
}
$("#NextButton").show();
$("#PrevButton").hide();
} else if (slideNum == 1) {
if (Phase == 1) {
$("#phase1q2").show();
} else {
$("#phase2q2").show();
}
$("#PrevButton").show();
} else if (slideNum == 2) {
if (Phase == 1) {
$("#phase1q3").show();
} else {
$("#phase2q3").show();
}
} else if (slideNum == 3) {
if (Phase == 1) {
$("#phase1q4").show();
} else {
$("#phase2q4").show();
}
} else if (slideNum == 4) {
if (Phase == 1) {
$("#phase1q5").show();
} else {
$("#phase2appendix").show();
}
} else if (slideNum == 5) {
if (Phase == 1) {
$("#phase1appendix").show();
$('#phase1end').show();
}
}
if (slideNum == 0) {
$("#NextButton").show();
} else if (slideNum < maxNum) {
$("#NextButton").show();
$("#PrevButton").show();
} else {
$("#NextButton").hide();
$('#phase1end').html('Thank you for checking out the efficacy study results!');
$('#phase2appendix').html('Thank you for checking out the efficacy study results!');
}
}
});
.image {
min-height: 100vh
}
.bg-image {
background-image: url('...');
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
}
/*font styling*/
.headfont {
font-family: "Cabin";
}
.mainfont {
font-family: "Hind Siliguri";
}
/*font awesome icon styling*/
.fa-bars {
color: #3479B2;
}
.fa-asterisk {
padding-left: 0.75rem;
padding-right: 0.75rem;
color: gray;
}
.scrollstyle {
padding-top: 2rem;
float: right;
}
.fa-li,
.fa-angle-up {
color: #278652;
}
.relpos {
position: relative;
}
.float-l {
float: left;
}
.float-r {
float: right;
}
.float-c {
float: center;
}
/*links and button styling*/
.copy-link,
.copy-link:link {
color: #3479B2;
text-decoration: underline;
}
.copy-link:hover,
.copy-link:active,
.copy-link:focus,
.copy-link:visited {
color: #B8367E;
transition: color .15s ease-in;
}
.bttn,
.bttn:focus,
.bttn:visited,
.bttn:active {
text-align: center;
border-radius: 0.25rem;
border: none;
outline: none;
font-weight: bold;
}
/*colors*/
.white {
color: #fff
}
.bg-blue {
background-color: #3479B2
}
/* padding */
.pv2 {
padding-top: .5rem;
padding-bottom: .5rem
}
.pad1 {
padding: 1rem;
}
.pad75 {
padding: 0.75rem;
}
.pad-l1 {
padding-left: 1rem;
}
.pad-b75 {
padding-bottom: 0.75rem;
}
.pad-t75 {
padding-top: 0.75rem;
}
.pad-t125 {
padding-top: 1.25rem;
}
.pad-lr {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
/*navbar styling*/
.topnav .nav-link {
text-decoration: none;
color: #3479B2;
border-bottom: 0.2em solid transparent;
}
.topnav .nav-link:hover {
border-bottom: 0.2em solid #3479B2;
}
.topnav .nav-link:active {
border-bottom: 0.2em solid #3479B2;
}
.navbar .dropdown-toggle {
margin-bottom: 0;
}
.nav-link-child,
.nav-link-child:hover {
color: white;
}
.nav-link-child {
padding-left: 0.5rem;
}
.nav-pad {
padding-top: 2rem!important;
padding-bottom: 4rem!important;
}
.nav-link:active,
.active {
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Hind+Siliguri:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row no-gutter">
<div class="d-none d-lg-flex col-md-5 col-lg-5 col-xl-5 bg-image image"></div>
<div class="col-md-9 col-lg-7 col-xl-7">
<div class="d-flex align-items-center">
<div class="col-lg-9 mx-auto">
<nav class="navbar-nav navbar-expand-lg nav-pad headfont" role="navigation">
<div class="navbar-header d-sm-block d-md-block d-lg-none">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<i class="fas fa-bars"></i>
</span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="navbar-nav mr-auto topnav" role="navigation">
<li class="nav-item">
<a class="nav-link active" href="index.html" target="_self" role="link">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#phase1" target="_self">Experiment</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#phase2" target="_self">Classrooms</a>
</li>
</ul>
</div>
</nav>
<h1 class="d-none d-sm-block display-4 headfont">Title OK</h1>
<h4 class="display-6 mainfont"><em>Question OK</em></h4>
<div class="row justify-content-start pad75 mainfont" id="intro">
<p>Also OK</p>
</div>
<div class="row justify-content-start pad75 mainfont" id="preregistration">
<p>Also OK - and this will "hide" when I click Phase I from the navbar.</p>
</div>
<section id="studypurpose">
<div class="row justify-content-start pad75 mainfont" id="phase1intro">
<p>This doesn't show</p>
</div>
<div class="row justify-content-start pad75 mainfont" id="phase2intro">
<p>This doesn't show</p>
</div>
<div class="row justify-content-start pad75 mainfont" id="phase1groups">
<p>This doesn't show</p>
</div>
<div class="row justify-content-start pad75 mainfont" id="phase2groups">
<p>Nope, doesn't show</p>
</div>
</section>
<section>
<div id="phase1all">
<div id="phase1q1">
<h4 class="display-6 mainfont" id="phase1q1header"><em>No show</em></h4>
<p class="justify-content-start pad75" id="phase1q1student">No show</p>
<p class="justify-content-start pad75" id="phase1q1dash">No show</p>
<p class="row justify-content-start pad75" id="phase1q1concl">No show</p>
</div>
<div id="phase1q2">
<h4 class="display-6 mainfont"><em>no show?</em></h4>
<p class="justify-content-start pad75">no show.</p>
<p class="justify-content-start pad75">no show.</p>
</div>
<div id="phase1q3">
<h4 class="display-6 mainfont"><em>why?</em></h4>
<p class="justify-content-start pad75">no show</p>
<p class="justify-content-start pad75"> nope.</p>
</div>
<div id="phase1q4">
<h4 class="display-6 mainfont"><em>nope?</em></h4>
<p class="justify-content-start pad75">Nope.</p>
<p class="justify-content-start pad75">Nope.</p>
</div>
<div id="phase1q5">
<h4 class="display-6 mainfont"><em>Was our study manipulation effective?</em></h4>
<p class="justify-content-start pad75">No show</p>
<p class="justify-content-start pad75">No show.</p>
</div>
<div id="phase1appendix">
<h4 class="display-6 mainfont"><em>Appendix: Method</em></h4>
<p class="justify-content-start pad75"><u>Participants</u>: No show.</p>
<p class="justify-content-start pad75"><u>Task</u>: No show</p>
<p class="justify-content-start pad75">No show.</p>
<p class="justify-content-start pad75">No show</p>
<p class="justify-content-start pad75">No show</p>
<p class="justify-content-start pad75">No show</p>
<p class="justify-content-start pad75">No show</p>
<p class="justify-content-start pad75">No show</p>
<p class="justify-content-start pad75">No show</p>
<p class="justify-content-start pad75"><u>Manipulation Checks</u>: No show</p>
</div>
<p id="phase1end" class="justify-content-start pad75"></p>
</div>
</section>
<section>
<div id="phase2all">
<div id="phase2q1">
<h4 class="display-6 mainfont"><em>No show</em></h4>
<p class="justify-content-start pad75">No show</p>
<p class="justify-content-start pad75">No show</p>
</div>
<div id="phase2q2">
<h4 class="display-6 mainfont"><em>No show</em></h4>
<p class="justify-content-start pad75">No show</p>
<p class="justify-content-start pad75">No show</p>
</div>
<div id="phase2q3">
<h4 class="display-6 mainfont"><em>No show</em></h4>
<p class="justify-content-start pad75">No show</p>
</div>
<div id="phase2q4">
<h4 class="display-6 mainfont"><em>No show</em></h4>
<p class="justify-content-start pad75">No show</p>
</div>
<div id="phase2appendix">
<h4 class="display-6 mainfont"><em>Appendix: Method</em></h4>
<p class="justify-content-start pad75"><u>Participants</u>: No show.</p>
<p class="justify-content-start pad75"><u>Task</u>: No show</p>
<p class="justify-content-start pad75">No show</p>
<p class="justify-content-start pad75">No show</p>
<p class="justify-content-start pad75">No show</p>
<p class="justify-content-start pad75">No show</p>
</div>
</div>
</section>
<button id="NextButton" class="bttn pv2 white bg-blue rounded mainfont relpos float-r">Next </button>
<button id="ViewStudy" class="bttn pv2 white bg-blue rounded mainfont relpos float-c">View Study Results</button>
<button id="PrevButton" class="bttn pv2 white bg-blue rounded mainfont relpos float-l"> Previous</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
在你的 HTML 中，我看到缺少结束标记：
<h4 class="display-6 mainfont"><em>Question OK/em></h4>
应该是
<h4 class="display-6 mainfont"><em>Question OK</em></h4>
检查您的 HTML 是否还有其他未关闭的标签，可能还有更多。另外你的JS代码有点乱，试试格式化一下，这样对你和其他人来说都会更容易。
document.addEventListener("DOMContentLoaded", function() {
//variable assignment
var Phase = 3;
var slideNum = 0;
var maxNum = 5;
//the JS for the return to the top button
$("a[href='#top']").click(function() {
$('html,body').animate({
scrollTop: 0
}, "slow");
return false;
});
$('[rel=tooltip]').tooltip({
trigger: "hover"
});
//hiding various things that don't need to be seen at first
function hideAll() {
$("#phase1intro").addClass('d-none');
$("#phase2intro").addClass('d-none');
$("#homelink").removeClass('active');
$("#phase1link").removeClass('active');
$("#phase2link").removeClass('active');
$("#preregistration").hide();
$("#ViewStudy").hide();
$("#PrevButton").hide();
$("#NextButton").hide();
}
hideAll();
$("#preregistration").show();
$("#homelink").addClass('active');
//only showing things relevant to either Phase I or Phase II
$("a[href='#phase1']").click(function() {
slideNum = 0;
Phase = 1;
maxNum = 6;
hideAll();
$("div.p2").addClass('d-none');
$("#phase1link").addClass('active');
$("#phase1intro").removeClass('d-none');
$("#ViewStudy").show();
});
$("a[href='#phase2']").click(function() {
slideNum = 0;
Phase = 2;
maxNum = 5;
hideAll();
$("div.p1").addClass('d-none');
$("#phase2link").addClass('active');
$("#phase2intro").removeClass('d-none');
$("#ViewStudy").show();
});
//Having the buttons to navigate through the slideshow
$("#NextButton").on('click', function() {
slideNum = slideNum + 1;
moveShow(slideNum);
});
$("#ViewStudy").on('click', function() {
$("#ViewStudy").hide();
$("#NextButton").show();
moveShow(slideNum);
});
$("#PrevButton").on('click', function() {
$("#phase" + Phase + "q" + (slideNum + 1)).addClass('d-none');
slideNum = slideNum - 1;
moveShow(slideNum);
});
//the slideshow function - there are repeats to accomodation people using Prev/Next
function moveShow(slideNum) {
$('#phase1end').addClass('d-none');
$('#phase2end').addClass('d-none');
if (slideNum == 0) {
$("#phase" + Phase + "q" + (slideNum + 1)).removeClass('d-none');
} else if (slideNum < maxNum) {
$("#phase" + Phase + "q" + (slideNum + 1)).removeClass('d-none');
$("#phase" + Phase + "q" + (slideNum)).addClass('d-none');
} else {
if (Phase == 1) {
$('#phase1end').removeClass('d-none');
} else {
$('#phase2end').removeClass('d-none');
}
}
if (slideNum == 0) {
$("#NextButton").show();
$("#PrevButton").hide();
} else if (slideNum < maxNum) {
$("#NextButton").show();
$("#PrevButton").show();
} else {
$("#NextButton").hide();
$("#phase" + Phase + "q" + (slideNum)).addClass('d-none');
}
}
});
.image {
min-height: 100vh
}
.bg-image {
background-image: url('...');
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
}
/*font styling*/
.headfont {
font-family: "Cabin";
}
.mainfont {
font-family: "Hind Siliguri";
}
/*positioning*/
.relpos {
position: relative;
}
.float-l {
float: left;
}
.float-r {
float: right;
}
/*links and button styling*/
.copy-link,
.copy-link:link {
color: #3479B2;
text-decoration: underline;
}
.copy-link:hover,
.copy-link:active,
.copy-link:focus,
.copy-link:visited {
color: #B8367E;
transition: color .15s ease-in;
}
.bttn,
.bttn:focus,
.bttn:visited,
.bttn:active {
text-align: center;
border-radius: 0.25rem;
border: none;
outline: none;
font-weight: bold;
}
/*colors*/
.white {
color: #fff
}
.bg-blue {
background-color: #3479B2
}
/* padding */
.scrollstyle {
padding-top: 2rem;
float: right;
}
.pad1 {
padding: 1rem;
}
.pad-end {
padding-left: 1rem;
padding-bottom: 0.75rem;
padding-top: 0.75rem;
}
.pv2 {
padding-top: .5rem;
padding-bottom: .5rem
}
p {
padding-left: 0.75rem;
padding-top: 0.5rem;
justify-content: start;
}
hr {
padding-bottom: 0.5rem;
}
/*navbar styling*/
.topnav .nav-link {
text-decoration: none;
color: #3479B2;
border-bottom: 0.2em solid transparent;
}
.topnav .nav-link:hover {
border-bottom: 0.2em solid #3479B2;
}
.topnav .nav-link:active {
border-bottom: 0.2em solid #3479B2;
}
.nav-pad {
padding-top: 2rem!important;
padding-bottom: 2rem!important;
}
.nav-link:active,
.active {
font-weight: bold;
}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Hind+Siliguri:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row no-gutter">
<div class="d-none d-lg-flex col-md-5 col-lg-5 col-xl-5 bg-image image" title="IPIP cover"></div>
<div class="col-md-9 col-lg-7 col-xl-7">
<div class="d-flex align-items-center">
<div class="col-lg-9 mx-auto">
<nav class="navbar-nav navbar-expand-lg nav-pad headfont" role="navigation">
<div class="navbar-header d-sm-block d-md-block d-lg-none">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<i class="fas fa-bars"></i>
</span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="navbar-nav mr-auto topnav" role="navigation">
<li class="nav-item">
<a class="nav-link active" id="homelink" href="index.html" target="_self" role="link">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" id="phase1link" href="#phase1" target="_self">Experiment</a>
</li>
<li class="nav-item">
<a class="nav-link" id="phase2link" href="#phase2" target="_self">Classrooms</a>
</li>
</ul>
</div>
</nav>
<section class="mainfont">
<h1 class="d-none d-sm-block display-4 headfont">Title</h1>
<h4 class="display-6"><em>Main Q?</em></h4>
<div class="row">
<p id="intro">Text intro</p>
</div>
<div class="row">
<p id="preregistration">prereg link text area.</p>
</div>
<section>
<div class="row d-none" id="phase1intro">
<p>Text.</p>
<p>Text groups.</p>
</div>
<div class="row d-none" id="phase2intro">
<p>Text.</p>
<p>Text groups.</p>
</div>
</section>
<hr>
<section>
<div class="row d-none p1" id="phase1q1">
<h4 class="display-6"><em>Q1?</em></h4>
<p>Text.</p>
<p>Texts.</p>
<p>Text.</p>
</div>
<div class="row d-none p1" id="phase1q2">
<h4 class="display-6"><em>Q2?</em></h4>
<p>Text.</p>
<p>Text.</p>
</div>
<div class="row d-none p1" id="phase1q3">
<h4 class="display-6"><em>Q3?</em></h4>
<p>Text.</p>
<p>Text.</p>
</div>
<div class="row d-none p1" id="phase1q4">
<h4 class="display-6"><em>Q4?</em></h4>
<p>Text.</p>
<p>Text.</p>
</div>
<div class="row d-none p1" id="phase1q5">
<h4 class="display-6"><em>Q5?</em></h4>
<p>Text.</p>
<p>Text.</p>
</div>
<div class="row d-none p1" id="phase1q6">
<h4 class="display-6"><em>Appendix: Method</em></h4>
<p><u>Participants</u>: Text.</p>
<p><u>Task</u>: Text.</p>
<p>Text.</p>
<p>Text.</p>
<p>Text.</p>
<p>Text.</p>
<p>Text.</p>
<p>Text.</p>
<p>Text.</p>
<p><u>Manipulation Checks</u>: Text</p>
</div>
<p id="phase1end" class="d-none p1">Thank you for checking out the study results!</p>
</section>
<section>
<div class="row d-none p2" id="phase2q1">
<h4 class="display-6"><em>Q1?</em></h4>
<p>Text.</p>
<p>TExts.</p>
</div>
<div class="row d-none p2" id="phase2q2">
<h4 class="display-6"><em>Q2</em></h4>
<p>Text.</p>
<p>Text.</p>
</div>
<div class="row d-none p2" id="phase2q3">
<h4 class="display-6"><em>Q3?</em></h4>
<p>Text3.</p>
</div>
<div class="row d-none p2" id="phase2q4">
<h4 class="display-6"><em>Q4?</em></h4>
<p>Text4.</p>
</div>
<div class="row d-none p2" id="phase2q5">
<h4 class="display-6"><em>Appendix: Method</em></h4>
<p><u>Participants</u>: Text.</p>
<p><u>Task</u>: Text.</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
<p id="phase2end p2" class="d-none">Thank you for checking out the study results!</p>
</section>
<section>
<div class="d-lg-block d-xl-none scrollstyle pad1" id="top-scroll" aria-labelledby="scroll-to-top">
<a class="copy-link" href="#top" rel="tooltip" data-toggle="tooltip" aria-labelledby="tooltip" data-placement="left" title="Scroll to top">
<i class="fas fa-angle-up fa-3x bg-blue"></i>
</a>
</div>
<div class="row pad-end"></div>
</section>
<button id="NextButton" class="bttn pv2 white bg-blue rounded relpos float-r">Next </button>
<button id="ViewStudy" class="bttn pv2 white bg-blue rounded relpos float-l">View Study Results</button>
<button id="PrevButton" class="bttn pv2 white bg-blue rounded relpos float-l"> Previous</button>
</section>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
解决方案是 parent CSS 属性 覆盖 child div 的 CSS 属性 .这就是为什么即使我将 child div 更改为 'show'，它仍然隐藏（因为 parent 仍然隐藏并且它覆盖 child）。最重要的是，没有办法隐藏 parent div 并有选择地显示 children。我要么需要将每个 child 隐藏在 div 中，要么重新组织，以便我想要一起显示的所有内容都在 div 中组合在一起。 （唯一没有链接到上面的是 Font Awesome JS 库，我认为它是因人而异的，所以我在这里避免了。哦，还有左栏中的实际图像。）
我的基本问题是我正在尝试 select 在 div idual ID 元素中 - 使用 JQuery 或 vanilla JavaScript - 并在不同的时间显示它们点，就像结果的在线 powerpoint 展示。值得注意的是，虽然下面的代码将使用 JQuery，但我已经尝试通过 document.getElementById 和 document.querySelector JavaScript 并将 style.visibility 设置为可见，甚至在JQuery，尝试了 $("[id='']").show() 并将它们放入控制台，但没有任何显示！相同的代码适用于未包含在 div 元素下的 HTML 元素 - 我是否遗漏了什么？但是为什么隐藏元素有效呢？为什么 show 不再有效？我也试过改变它是从源代码还是附近的外部脚本加载到 JQuery 中，并将 JavaScript 放在头部而不是 body （以防万一，尽管 DOM 加载条件，代码引用了它尚未识别的内容）。两者都没有改变。
因此，该功能运行良好 - 下一张和上一张按钮将适当地点击幻灯片编号。单击标题为第 I 阶段（或第 II 阶段 - 我评论了其中一个，因为我没有包括 HTML 的其余部分，它们在 phase1q2、phase1q3 等中不起作用）工作正常。不起作用的实际上是在关键时间点显示这些 HTML 元素，正如我之前所说，它在控制台中不起作用，也不适用于香草 JavaScript。我尝试使用特定 p 元素 id 的代码，例如 phase1intro 和 phase1q1student。我尝试删除带有 row/justify-content/pad 的 div 元素并仅使用 p 元素。如果没有 hideAll 功能，所有内容都显示在段落上，这表明没有 HTML 问题。控制台中也没有错误显示。当我在控制台中 运行 JQuery 时，它显示“jQuery.fn.init [div#phase1intro.row.justify-content-start.pad75.mainfont, prevObject : jQuery.fn.init(1)]”。即，没有错误。与 style.visibility 相同。我已经为此工作了几个小时，但我不知所措 - 我在这里错过了什么？是 div + p 吗？尽管使用 ID selector，我是否需要成为目标？是否每个 p 元素都需要自己的 id 并且我必须 select 它们都 individually 才能显示？这就是我在其他代码中所做的，它工作正常 - 但这似乎真的很浪费 code-wise!
document.addEventListener("DOMContentLoaded", function() {
var Phase = 3;
function hideAll() {
$("#studypurpose").hide();
$("#phase1all").hide();
$("#phase2all").hide();
$("#ViewStudy").hide();
$("#PrevButton").hide();
$("#NextButton").hide();
}
hideAll();
$("a[href='#phase1']").click(function() {
slideNum = 0;
Phase = 1;
hideAll();
$("#preregistration").hide();
$("#phase1intro").show();
$("#phase1groups").show();
$("#ViewStudy").show();
});
$("a[href='#phase2']").click(function() {
slideNum = 0;
Phase = 2;
hideAll();
$("#preregistration").hide();
$("#phase2intro").show();
$("#phase2groups").show();
$("#ViewStudy").show();
});
var slideNum = 0;
var maxNum = 5;
$("#NextButton").on('click', function() {
slideNum = slideNum + 1;
moveShow(slideNum);
});
$("#ViewStudy").on('click', function() {
$("#ViewStudy").hide();
$("#NextButton").show();
moveShow(slideNum);
});
$("#PrevButton").on('click', function() {
slideNum = slideNum - 1;
moveShow(slideNum);
});
function moveShow(slideNum) {
if (slideNum == 0) {
if (Phase == 1) {
$("#phase1q1").show();
} else {
$("#phase2q1").show();
}
$("#NextButton").show();
$("#PrevButton").hide();
} else if (slideNum == 1) {
if (Phase == 1) {
$("#phase1q2").show();
} else {
$("#phase2q2").show();
}
$("#PrevButton").show();
} else if (slideNum == 2) {
if (Phase == 1) {
$("#phase1q3").show();
} else {
$("#phase2q3").show();
}
} else if (slideNum == 3) {
if (Phase == 1) {
$("#phase1q4").show();
} else {
$("#phase2q4").show();
}
} else if (slideNum == 4) {
if (Phase == 1) {
$("#phase1q5").show();
} else {
$("#phase2appendix").show();
}
} else if (slideNum == 5) {
if (Phase == 1) {
$("#phase1appendix").show();
$('#phase1end').show();
}
}
if (slideNum == 0) {
$("#NextButton").show();
} else if (slideNum < maxNum) {
$("#NextButton").show();
$("#PrevButton").show();
} else {
$("#NextButton").hide();
$('#phase1end').html('Thank you for checking out the efficacy study results!');
$('#phase2appendix').html('Thank you for checking out the efficacy study results!');
}
}
});
.image {
min-height: 100vh
}
.bg-image {
background-image: url('...');
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
}
/*font styling*/
.headfont {
font-family: "Cabin";
}
.mainfont {
font-family: "Hind Siliguri";
}
/*font awesome icon styling*/
.fa-bars {
color: #3479B2;
}
.fa-asterisk {
padding-left: 0.75rem;
padding-right: 0.75rem;
color: gray;
}
.scrollstyle {
padding-top: 2rem;
float: right;
}
.fa-li,
.fa-angle-up {
color: #278652;
}
.relpos {
position: relative;
}
.float-l {
float: left;
}
.float-r {
float: right;
}
.float-c {
float: center;
}
/*links and button styling*/
.copy-link,
.copy-link:link {
color: #3479B2;
text-decoration: underline;
}
.copy-link:hover,
.copy-link:active,
.copy-link:focus,
.copy-link:visited {
color: #B8367E;
transition: color .15s ease-in;
}
.bttn,
.bttn:focus,
.bttn:visited,
.bttn:active {
text-align: center;
border-radius: 0.25rem;
border: none;
outline: none;
font-weight: bold;
}
/*colors*/
.white {
color: #fff
}
.bg-blue {
background-color: #3479B2
}
/* padding */
.pv2 {
padding-top: .5rem;
padding-bottom: .5rem
}
.pad1 {
padding: 1rem;
}
.pad75 {
padding: 0.75rem;
}
.pad-l1 {
padding-left: 1rem;
}
.pad-b75 {
padding-bottom: 0.75rem;
}
.pad-t75 {
padding-top: 0.75rem;
}
.pad-t125 {
padding-top: 1.25rem;
}
.pad-lr {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
/*navbar styling*/
.topnav .nav-link {
text-decoration: none;
color: #3479B2;
border-bottom: 0.2em solid transparent;
}
.topnav .nav-link:hover {
border-bottom: 0.2em solid #3479B2;
}
.topnav .nav-link:active {
border-bottom: 0.2em solid #3479B2;
}
.navbar .dropdown-toggle {
margin-bottom: 0;
}
.nav-link-child,
.nav-link-child:hover {
color: white;
}
.nav-link-child {
padding-left: 0.5rem;
}
.nav-pad {
padding-top: 2rem!important;
padding-bottom: 4rem!important;
}
.nav-link:active,
.active {
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Hind+Siliguri:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row no-gutter">
<div class="d-none d-lg-flex col-md-5 col-lg-5 col-xl-5 bg-image image"></div>
<div class="col-md-9 col-lg-7 col-xl-7">
<div class="d-flex align-items-center">
<div class="col-lg-9 mx-auto">
<nav class="navbar-nav navbar-expand-lg nav-pad headfont" role="navigation">
<div class="navbar-header d-sm-block d-md-block d-lg-none">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<i class="fas fa-bars"></i>
</span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="navbar-nav mr-auto topnav" role="navigation">
<li class="nav-item">
<a class="nav-link active" href="index.html" target="_self" role="link">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#phase1" target="_self">Experiment</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#phase2" target="_self">Classrooms</a>
</li>
</ul>
</div>
</nav>
<h1 class="d-none d-sm-block display-4 headfont">Title OK</h1>
<h4 class="display-6 mainfont"><em>Question OK</em></h4>
<div class="row justify-content-start pad75 mainfont" id="intro">
<p>Also OK</p>
</div>
<div class="row justify-content-start pad75 mainfont" id="preregistration">
<p>Also OK - and this will "hide" when I click Phase I from the navbar.</p>
</div>
<section id="studypurpose">
<div class="row justify-content-start pad75 mainfont" id="phase1intro">
<p>This doesn't show</p>
</div>
<div class="row justify-content-start pad75 mainfont" id="phase2intro">
<p>This doesn't show</p>
</div>
<div class="row justify-content-start pad75 mainfont" id="phase1groups">
<p>This doesn't show</p>
</div>
<div class="row justify-content-start pad75 mainfont" id="phase2groups">
<p>Nope, doesn't show</p>
</div>
</section>
<section>
<div id="phase1all">
<div id="phase1q1">
<h4 class="display-6 mainfont" id="phase1q1header"><em>No show</em></h4>
<p class="justify-content-start pad75" id="phase1q1student">No show</p>
<p class="justify-content-start pad75" id="phase1q1dash">No show</p>
<p class="row justify-content-start pad75" id="phase1q1concl">No show</p>
</div>
<div id="phase1q2">
<h4 class="display-6 mainfont"><em>no show?</em></h4>
<p class="justify-content-start pad75">no show.</p>
<p class="justify-content-start pad75">no show.</p>
</div>
<div id="phase1q3">
<h4 class="display-6 mainfont"><em>why?</em></h4>
<p class="justify-content-start pad75">no show</p>
<p class="justify-content-start pad75"> nope.</p>
</div>
<div id="phase1q4">
<h4 class="display-6 mainfont"><em>nope?</em></h4>
<p class="justify-content-start pad75">Nope.</p>
<p class="justify-content-start pad75">Nope.</p>
</div>
<div id="phase1q5">
<h4 class="display-6 mainfont"><em>Was our study manipulation effective?</em></h4>
<p class="justify-content-start pad75">No show</p>
<p class="justify-content-start pad75">No show.</p>
</div>
<div id="phase1appendix">
<h4 class="display-6 mainfont"><em>Appendix: Method</em></h4>
<p class="justify-content-start pad75"><u>Participants</u>: No show.</p>
<p class="justify-content-start pad75"><u>Task</u>: No show</p>
<p class="justify-content-start pad75">No show.</p>
<p class="justify-content-start pad75">No show</p>
<p class="justify-content-start pad75">No show</p>
<p class="justify-content-start pad75">No show</p>
<p class="justify-content-start pad75">No show</p>
<p class="justify-content-start pad75">No show</p>
<p class="justify-content-start pad75">No show</p>
<p class="justify-content-start pad75"><u>Manipulation Checks</u>: No show</p>
</div>
<p id="phase1end" class="justify-content-start pad75"></p>
</div>
</section>
<section>
<div id="phase2all">
<div id="phase2q1">
<h4 class="display-6 mainfont"><em>No show</em></h4>
<p class="justify-content-start pad75">No show</p>
<p class="justify-content-start pad75">No show</p>
</div>
<div id="phase2q2">
<h4 class="display-6 mainfont"><em>No show</em></h4>
<p class="justify-content-start pad75">No show</p>
<p class="justify-content-start pad75">No show</p>
</div>
<div id="phase2q3">
<h4 class="display-6 mainfont"><em>No show</em></h4>
<p class="justify-content-start pad75">No show</p>
</div>
<div id="phase2q4">
<h4 class="display-6 mainfont"><em>No show</em></h4>
<p class="justify-content-start pad75">No show</p>
</div>
<div id="phase2appendix">
<h4 class="display-6 mainfont"><em>Appendix: Method</em></h4>
<p class="justify-content-start pad75"><u>Participants</u>: No show.</p>
<p class="justify-content-start pad75"><u>Task</u>: No show</p>
<p class="justify-content-start pad75">No show</p>
<p class="justify-content-start pad75">No show</p>
<p class="justify-content-start pad75">No show</p>
<p class="justify-content-start pad75">No show</p>
</div>
</div>
</section>
<button id="NextButton" class="bttn pv2 white bg-blue rounded mainfont relpos float-r">Next </button>
<button id="ViewStudy" class="bttn pv2 white bg-blue rounded mainfont relpos float-c">View Study Results</button>
<button id="PrevButton" class="bttn pv2 white bg-blue rounded mainfont relpos float-l"> Previous</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
在你的 HTML 中，我看到缺少结束标记：
<h4 class="display-6 mainfont"><em>Question OK/em></h4>
应该是
<h4 class="display-6 mainfont"><em>Question OK</em></h4>
检查您的 HTML 是否还有其他未关闭的标签，可能还有更多。另外你的JS代码有点乱，试试格式化一下，这样对你和其他人来说都会更容易。
document.addEventListener("DOMContentLoaded", function() {
//variable assignment
var Phase = 3;
var slideNum = 0;
var maxNum = 5;
//the JS for the return to the top button
$("a[href='#top']").click(function() {
$('html,body').animate({
scrollTop: 0
}, "slow");
return false;
});
$('[rel=tooltip]').tooltip({
trigger: "hover"
});
//hiding various things that don't need to be seen at first
function hideAll() {
$("#phase1intro").addClass('d-none');
$("#phase2intro").addClass('d-none');
$("#homelink").removeClass('active');
$("#phase1link").removeClass('active');
$("#phase2link").removeClass('active');
$("#preregistration").hide();
$("#ViewStudy").hide();
$("#PrevButton").hide();
$("#NextButton").hide();
}
hideAll();
$("#preregistration").show();
$("#homelink").addClass('active');
//only showing things relevant to either Phase I or Phase II
$("a[href='#phase1']").click(function() {
slideNum = 0;
Phase = 1;
maxNum = 6;
hideAll();
$("div.p2").addClass('d-none');
$("#phase1link").addClass('active');
$("#phase1intro").removeClass('d-none');
$("#ViewStudy").show();
});
$("a[href='#phase2']").click(function() {
slideNum = 0;
Phase = 2;
maxNum = 5;
hideAll();
$("div.p1").addClass('d-none');
$("#phase2link").addClass('active');
$("#phase2intro").removeClass('d-none');
$("#ViewStudy").show();
});
//Having the buttons to navigate through the slideshow
$("#NextButton").on('click', function() {
slideNum = slideNum + 1;
moveShow(slideNum);
});
$("#ViewStudy").on('click', function() {
$("#ViewStudy").hide();
$("#NextButton").show();
moveShow(slideNum);
});
$("#PrevButton").on('click', function() {
$("#phase" + Phase + "q" + (slideNum + 1)).addClass('d-none');
slideNum = slideNum - 1;
moveShow(slideNum);
});
//the slideshow function - there are repeats to accomodation people using Prev/Next
function moveShow(slideNum) {
$('#phase1end').addClass('d-none');
$('#phase2end').addClass('d-none');
if (slideNum == 0) {
$("#phase" + Phase + "q" + (slideNum + 1)).removeClass('d-none');
} else if (slideNum < maxNum) {
$("#phase" + Phase + "q" + (slideNum + 1)).removeClass('d-none');
$("#phase" + Phase + "q" + (slideNum)).addClass('d-none');
} else {
if (Phase == 1) {
$('#phase1end').removeClass('d-none');
} else {
$('#phase2end').removeClass('d-none');
}
}
if (slideNum == 0) {
$("#NextButton").show();
$("#PrevButton").hide();
} else if (slideNum < maxNum) {
$("#NextButton").show();
$("#PrevButton").show();
} else {
$("#NextButton").hide();
$("#phase" + Phase + "q" + (slideNum)).addClass('d-none');
}
}
});
.image {
min-height: 100vh
}
.bg-image {
background-image: url('...');
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
}
/*font styling*/
.headfont {
font-family: "Cabin";
}
.mainfont {
font-family: "Hind Siliguri";
}
/*positioning*/
.relpos {
position: relative;
}
.float-l {
float: left;
}
.float-r {
float: right;
}
/*links and button styling*/
.copy-link,
.copy-link:link {
color: #3479B2;
text-decoration: underline;
}
.copy-link:hover,
.copy-link:active,
.copy-link:focus,
.copy-link:visited {
color: #B8367E;
transition: color .15s ease-in;
}
.bttn,
.bttn:focus,
.bttn:visited,
.bttn:active {
text-align: center;
border-radius: 0.25rem;
border: none;
outline: none;
font-weight: bold;
}
/*colors*/
.white {
color: #fff
}
.bg-blue {
background-color: #3479B2
}
/* padding */
.scrollstyle {
padding-top: 2rem;
float: right;
}
.pad1 {
padding: 1rem;
}
.pad-end {
padding-left: 1rem;
padding-bottom: 0.75rem;
padding-top: 0.75rem;
}
.pv2 {
padding-top: .5rem;
padding-bottom: .5rem
}
p {
padding-left: 0.75rem;
padding-top: 0.5rem;
justify-content: start;
}
hr {
padding-bottom: 0.5rem;
}
/*navbar styling*/
.topnav .nav-link {
text-decoration: none;
color: #3479B2;
border-bottom: 0.2em solid transparent;
}
.topnav .nav-link:hover {
border-bottom: 0.2em solid #3479B2;
}
.topnav .nav-link:active {
border-bottom: 0.2em solid #3479B2;
}
.nav-pad {
padding-top: 2rem!important;
padding-bottom: 2rem!important;
}
.nav-link:active,
.active {
font-weight: bold;
}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Hind+Siliguri:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row no-gutter">
<div class="d-none d-lg-flex col-md-5 col-lg-5 col-xl-5 bg-image image" title="IPIP cover"></div>
<div class="col-md-9 col-lg-7 col-xl-7">
<div class="d-flex align-items-center">
<div class="col-lg-9 mx-auto">
<nav class="navbar-nav navbar-expand-lg nav-pad headfont" role="navigation">
<div class="navbar-header d-sm-block d-md-block d-lg-none">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<i class="fas fa-bars"></i>
</span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="navbar-nav mr-auto topnav" role="navigation">
<li class="nav-item">
<a class="nav-link active" id="homelink" href="index.html" target="_self" role="link">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" id="phase1link" href="#phase1" target="_self">Experiment</a>
</li>
<li class="nav-item">
<a class="nav-link" id="phase2link" href="#phase2" target="_self">Classrooms</a>
</li>
</ul>
</div>
</nav>
<section class="mainfont">
<h1 class="d-none d-sm-block display-4 headfont">Title</h1>
<h4 class="display-6"><em>Main Q?</em></h4>
<div class="row">
<p id="intro">Text intro</p>
</div>
<div class="row">
<p id="preregistration">prereg link text area.</p>
</div>
<section>
<div class="row d-none" id="phase1intro">
<p>Text.</p>
<p>Text groups.</p>
</div>
<div class="row d-none" id="phase2intro">
<p>Text.</p>
<p>Text groups.</p>
</div>
</section>
<hr>
<section>
<div class="row d-none p1" id="phase1q1">
<h4 class="display-6"><em>Q1?</em></h4>
<p>Text.</p>
<p>Texts.</p>
<p>Text.</p>
</div>
<div class="row d-none p1" id="phase1q2">
<h4 class="display-6"><em>Q2?</em></h4>
<p>Text.</p>
<p>Text.</p>
</div>
<div class="row d-none p1" id="phase1q3">
<h4 class="display-6"><em>Q3?</em></h4>
<p>Text.</p>
<p>Text.</p>
</div>
<div class="row d-none p1" id="phase1q4">
<h4 class="display-6"><em>Q4?</em></h4>
<p>Text.</p>
<p>Text.</p>
</div>
<div class="row d-none p1" id="phase1q5">
<h4 class="display-6"><em>Q5?</em></h4>
<p>Text.</p>
<p>Text.</p>
</div>
<div class="row d-none p1" id="phase1q6">
<h4 class="display-6"><em>Appendix: Method</em></h4>
<p><u>Participants</u>: Text.</p>
<p><u>Task</u>: Text.</p>
<p>Text.</p>
<p>Text.</p>
<p>Text.</p>
<p>Text.</p>
<p>Text.</p>
<p>Text.</p>
<p>Text.</p>
<p><u>Manipulation Checks</u>: Text</p>
</div>
<p id="phase1end" class="d-none p1">Thank you for checking out the study results!</p>
</section>
<section>
<div class="row d-none p2" id="phase2q1">
<h4 class="display-6"><em>Q1?</em></h4>
<p>Text.</p>
<p>TExts.</p>
</div>
<div class="row d-none p2" id="phase2q2">
<h4 class="display-6"><em>Q2</em></h4>
<p>Text.</p>
<p>Text.</p>
</div>
<div class="row d-none p2" id="phase2q3">
<h4 class="display-6"><em>Q3?</em></h4>
<p>Text3.</p>
</div>
<div class="row d-none p2" id="phase2q4">
<h4 class="display-6"><em>Q4?</em></h4>
<p>Text4.</p>
</div>
<div class="row d-none p2" id="phase2q5">
<h4 class="display-6"><em>Appendix: Method</em></h4>
<p><u>Participants</u>: Text.</p>
<p><u>Task</u>: Text.</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
<p id="phase2end p2" class="d-none">Thank you for checking out the study results!</p>
</section>
<section>
<div class="d-lg-block d-xl-none scrollstyle pad1" id="top-scroll" aria-labelledby="scroll-to-top">
<a class="copy-link" href="#top" rel="tooltip" data-toggle="tooltip" aria-labelledby="tooltip" data-placement="left" title="Scroll to top">
<i class="fas fa-angle-up fa-3x bg-blue"></i>
</a>
</div>
<div class="row pad-end"></div>
</section>
<button id="NextButton" class="bttn pv2 white bg-blue rounded relpos float-r">Next </button>
<button id="ViewStudy" class="bttn pv2 white bg-blue rounded relpos float-l">View Study Results</button>
<button id="PrevButton" class="bttn pv2 white bg-blue rounded relpos float-l"> Previous</button>
</section>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
解决方案是 parent CSS 属性 覆盖 child div 的 CSS 属性 .这就是为什么即使我将 child div 更改为 'show'，它仍然隐藏（因为 parent 仍然隐藏并且它覆盖 child）。最重要的是，没有办法隐藏 parent div 并有选择地显示 children。我要么需要将每个 child 隐藏在 div 中，要么重新组织，以便我想要一起显示的所有内容都在 div 中组合在一起。 （唯一没有链接到上面的是 Font Awesome JS 库，我认为它是因人而异的，所以我在这里避免了。哦，还有左栏中的实际图像。）