我有一个我创建的 Accordion ，用于显示某些选定的 pdf。 然后，我在同一页面上添加了一个 iframe，以在其旁边显示所选的 pdf。
然后我尝试添加一些 javascript 代码以加载到 iframe 中以选择用户选择的代码来显示正确的 pdf。虽然它似乎不起作用。
我已将我的代码笔项目链接到此处:https://codepen.io/Si24/pen/KrprRN
html:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>What to Say Dialogues</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../App_Themes/Dialogue/WhatToSay.css" />
</head>
<body>
<form id="WhatToSay" runat="server">
<div class="wrap">
<section class="dialogue-section">
<h1>Dialogues</h1>
<!-- beginning of prospecting section-->
<div class="dial-section-1">
<input id="dial-1" type="radio" name="tabs" tabindex="1" />
<label for="dial-1">Prospecting</label>
<div class="dial-wrap">
<div class="sections">
<input id="sections-2" type="radio" name="prospecting-tab-one" tabindex="3" />
<label for="sections-2">Cold Calling - Offer of Information</label>
<p class="result">A Reason to call : Making market information available to a prospect so as to gain an appointment as well as have a reason to keep in touch.</p>
</div>
<div class="sections">
<input id="sections-7" type="radio" name="prospecting-tab-one" tabindex="8" />
<label for="sections-7">People you may know</label>
<p class="result">A Reason to call :
</p>
</div>
<div class="sections">
<input id="sections-8" type="radio" name="prospecting-tab-one" tabindex="9" />
<label for="sections-8">Pre Qualifying</label>
<p class="result">A Reason to call :
</p>
</div>
<div class="sections">
<input id="sections-9" type="radio" name="prospecting-tab-one" tabindex="10" />
<label for="sections-9">Show House</label>
<p class="result">A Reason to call: Letting the neighbours know that there is a show house in there vicinity so as to qualify and get an appointment.</p>
</div>
<div class="sections">
<input id="sections-12" type="radio" name="prospecting-tab-one" tabindex="13" />
<label for="sections-12">OPT in Follow Up</label>
</div>
</div>
</div>
<!-- end of prospecting Dialogue section-->
<div class="dial-section-2">
<input id="dial-2" type="radio" name="tabs" tabindex="14" />
<label for="dial-2">Listing</label>
<div class="dial-wrap">
<div class="sections">
<input id="sections-13" type="radio" name="questions-tab-two" tabindex="15">
<label for="sections-13">Pre Qualifying</label>
<!-- end of question label -->
</div>
<div class="sections">
<input id="sections-15" type="radio" name="questions-tab-two" tabindex="17">
<label for="sections-15">Listing Presentation</label>
<!-- end of question label -->
<p class="result">Presentation: Getting the Listing using trusted methods such as confirmation of Reason and Motivation, establishing market value (Price) and getting the mandate.
</p>
</div>
<div class="sections">
<input id="sections-16" type="radio" name="questions-tab-two" tabindex="18">
<label for="sections-16">Intelligent Pricing</label>
<!-- end of question label -->
<p class="result">Pricing: A visual and easy interactive way of showing how incorrect pricing affects buyer interest.
</p>
</div>
<div class="sections">
<input id="sections-17" type="radio" name="questions-tab-two" tabindex="19">
<label for="sections-17">Reality Check</label>
<!-- end of question label -->
<p class="result">The Competition: A visual picture showing stock availability, competition and what’s happening in the market.
</p>
</div>
<div class="sections">
<input id="sections-18" type="radio" name="questions-tab-two" tabindex="20">
<label for="sections-18">How to Fill in the Reality Check Sheet</label>
<!-- end of question label -->
<p class="result">The Competition: How to use the Reality check sheet to show stock availability, competition and what’s happening in the market as well as where the data comes from.
</p>
</div>
</div>
</div>
<div class="dial-section-3">
<input id="dial-3" type="radio" name="tabs" tabindex="21" />
<label for="dial-3">CMA prospecting - Video / SMS</label>
<div class="dial-wrap">
<div class="sections">
<input id="sections-19" type="radio" name="questions-tab-two" tabindex="22">
<label for="sections-19">Video Dialogue</label>
<!-- end of question label -->
<p class="result">A Reason to call: To confirm an appointment already made but not yet pre-qualified for, to find out how Motivated they are and Reason for selling.
</p>
</div>
<div class="sections">
<input id="sections-20" type="radio" name="questions-tab-two" tabindex="23">
<label for="sections-20">Video Dialogue</label>
<!-- end of question label -->
<p class="result">Pre Listing Package Suggestions: Some suggestions for inclusion in you pre Appointment Listing Package icluding various reports from CMAInfo.
</p>
</div>
<div class="sections">
<input id="sections-21" type="radio" name="questions-tab-two" tabindex="24">
<label for="sections-21">Sample YouTube Video</label>
<!-- end of question label -->
<p class="result">Presentation: Getting the Listing using trusted methods such as confirmation of Reason and Motivation, establishing market value (Price) and getting the mandate.
</p>
</div>
<div class="sections">
<input id="sections-22" type="radio" name="questions-tab-two" tabindex="25">
<label for="sections-22">SMS Text..</label>
<!-- end of question label -->
<p class="result">Pricing: A visual and easy interactive way of showing how incorrect pricing affects buyer interest.
</p>
</div>
</div>
</section>
</div>
<div class="split right">
<iframe id="dialPdf" src="" width="50%"> </iframe>
</div>
</form>
</body>
</html>
Css :
body {
-webkit-animation:bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
from {padding:0;}
to {padding:0;}
}
body{
background:radial-gradient(ellipse fartherst-side as 100% 100%,#d4faf6 1%,#85d8ce 30%,#085078 120%);
background-attachment:fixed;
padding-top:2em;
overflow-y:scroll;
}
.split{
height:100%;
width:50%;
position:fixed;
z-index:1;
overflow:hidden;
}
.left{
left:0;
}
.right{
right:0;
}
.wrap {
display:block;
max-width:1024px;
margin: 0 auto 2em;
padding: 0 1em;
/*width:100%;*/
}
@media(min-width:43.75em)
{
.wrap{
padding:3em;
}
}
p{
color:#555;
text-shadow:1px 1px 1px #fff;
margin-left:2em;
}
a, a:visited{
color:#4bc5b7;
text-decoration:none;
}
.dialogue-section{
background:#f1f1f1;
box-shadow:0 2px 5px rgba(68,68,0.4);
display:inline-block;
font-size: 1rem;
padding: 1em;
position: relative;
vertical-align:top;
width: 100%;
}
@media (min-width: 50em){
.dialogue-section{
font-size:0.75rem;
padding:1em 1.5em;
}
}
@media (min-width:62.5em){
.dialogue-section{
font-size: 1rem;
}
}
.dialogue-section h1{
font-family:Arial, Helvetica, sans-serif;
color:#085078;
font-size:1.25em;
font-size:5.5vw;
font-weight:700;
margin-bottom:0.25em;
}
@media (min-width:32.25em){
.dialogue-section h1{
font-size:3.25em;
font-size:4.9vw;
}
}
.dialogue-section > p, .dialogue-section >h1 {
text-align:center;
}
.dialogue-section > p {
font-size:0.667em;
font-size:2.8vw;
margin-bottom:1em;
}
@media (min-width:22.1875em){
.dialogue-section > p{
font-size:0.667em;
}
}
@media(min-width:31.25em){
.dialogue-section > p{
font-size:1em;
}
}
@media(min-width:81.25em){
.dialogue-section > p{
font-size:1.15em;
}
}
div[class^=dial] {
width: 100%;
}
div[class^=dial] > label {
background: #2980b9;
color: #fff;
cursor: pointer;
display: block;
font-weight: bold;
line-height: 1.4;
margin-bottom: 0.5em;
padding: 0.75em 0.5em;
transition: all 0.55s;
}
div[class^= dial] > label:hover {
background: #41b9ff;
}
@media (min-width:50em){
div[class^=dial] > label{
font-size:1.25em;
}
}
div[class^=dial] > input {
position:absolute;
z-index: -999;
}
div[class^= dial] > input:focus + label {
background:#41b9ff;
letter-spacing:1px;
}
div[class^=dial].dial-wrap {
height: 100%;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: all 0.75s cubic-bezier(0.19,1,0.22,1);
width: 100%;
}
div[class^=dial] > input:checked ~ .dial-wrap {
max-height: 1000px;
opacity: 1;
transition: all 1.95s cubic-bezier(0.19,1 0.22,1);
}
.dial-wrap .sections {
margin: 1em 0;
}
.section{
margin-left:1em;
}
.dial-wrap label {
color: #0a6090;
cursor: pointer;
display: block;
font-weight: bold;
margin-bottom: 0.5em;
}
@media(min-width:50em){
.dial-wrap label {
font-size: 1.25em;
}
}
.dial-wrap input {
position: absolute;
z-index: -999;
top: -1000px;
}
.dial-wrap input:focus + label {
color: #064060;
}
.dial-wrap input:not(:checked) ~ p {
height: 100%;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: all 0.75s cubic-bezier(0.19,1,0.22,1);
}
.dial-wrap input:checked ~ p {
max-height: 500px;
opacity: 1;
transition: all 1.95s cubic-bezier(0.19,1,0.22,1);
}
input:focus{
border:3px solid red;
outline:3px solid red;
background:red;
}
a:focus {
color:#085078;
font-weight:bold;
outline:none;
}
#dialPdf{
box-shadow: 0 2px 5px rgba(68,68,0.4);
height:100%;
width:50%;
padding:1em 1.5em;
}
and javascript:
var docPdf = document.getElementsByClassName("docPdf");
function openPdf() {
document.getElementById("dialPdf").src = docPdf;
////console.log("this is working");
//document.getElementById("dialPdf").src = "";
}
any help or info what I'm doing wrong will be appreciated.
最佳答案
当您点击带有预期 url 的 Accordion 时，调用 openPdf 函数以加载到 iframe 中。
更新了 javascript 代码
function openPdf(url) {
document.getElementById("dialPdf").src = url;
}
关于javascript - javascript中的 Accordion 选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53205668/