JS/HTML 调查页面的下一个和上一个按钮
[英]Next and Previous button for JS/HTML survey page
问题描述
I am creating a survey page and using Bootstrap nav-tab for creating questionnaire tab but i am facing issue I used below code for creating previous and next tab
我正在创建一个调查页面并使用 Bootstrap 导航选项卡来创建问卷选项卡，但我面临的问题是我使用下面的代码来创建上一个和下一个选项卡
But below code is not working for me My full code is given below with HTMl/CSS and Js file.After clicking next and previous button nothing is happening.Someone please check and let me know what is wrong with my code.但下面的代码对我不起作用 我的完整代码在下面给出了 HTMl/CSS 和 Js 文件。单击下一步和上一个按钮后，什么也没有发生。有人请检查并让我知道我的代码有什么问题。
$('.btnNext').click(function(){
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function(){
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
function displayRadioValue() { let section1 = document.querySelectorAll('.section-1 > input[type="radio"]') let section2 = document.querySelectorAll('.section-2 > input[type="radio"]') let fullName = document.querySelector('#fullName').value let email = document.querySelector('#email').value let age = document.querySelector('#age').value var ctx = document.querySelector('#resultsChart').getContext('2d'); let section1Total = 0 let section2Total = 0 let section1Question = 0 let section2Question = 0 let finalResults = document.querySelector('.final-results') let result1 = '' let result2 = '' finalResults.innerHTML = '' //Section 1 section1.forEach(function(radio, index) { if (radio.checked) { section2Question++ section1Total += +radio.value } }) //Section 2 section2.forEach(function(radio, index) { if (radio.checked) { section1Question++ section2Total += +radio.value } }) var options = { type: 'bar', data: { labels: ["Section 1", "Section 2"], datasets: [{ label: 'Total Scored', data: [section1Question, section2Question, 30], backgroundColor: '#E91E63', borderWidth: 1 }, { label: 'Percentage %', data: [((section1Total / (section1Question * 3)) * 100).toFixed(2), ((section2Total / (section2Question * 3)) * 100).toFixed(2), 30], backgroundColor: '#004D40', borderWidth: 1 } ] }, options: { scales: { responsive: true, yAxes: [{ ticks: { reverse: false } }] } } } //Final Results and validation if (fullName.value != '' && email.value != '' && age.value != '') { if (section1Total > 0 && section2Total > 0) { finalResults.innerHTML += genDetails(fullName, email, age) finalResults.innerHTML += "<h2>Results</h2>" finalResults.innerHTML += genTable(section1Question, section1Total, 1) finalResults.innerHTML += genTable(section2Question, section2Total, 2) finalResults.innerHTML += "<h2>Chart Results</h2>" document.getElementById("control").style.display = "block"; document.getElementById("resultsChart").style.display = "block"; document.getElementById("toemail").href += document.querySelector(".final-results").innerText; new Chart(ctx, options); //show chart } else { finalResults.innerHTML = 'Snap! Please select the atleast one survey question from each section ' } } else { finalResults.innerHTML = 'Snap! Please enter your name, emial, age in the first section ' } } function genDetails(name, email, age) { var result = "<h2>Personal Info</h2>" result += "<b>Full name:</b> <span>" + name + "</span><br>" result += "<b>Email name:</b> <span>" + email + "</span><br>" result += "<b>Age: </b> <span>" + age + "</span><br>" return result } function genTable(ques, total, section) { var result = "<b>Section " + section + ":</b><br>" var tr = "<tr><th>" + total + "</th><th>" + ((total / (ques * 3)) * 100).toFixed(2) + "</th></tr>" result += "<table><thead><tr><th>Total Score</th><th>Percentage</th></tr></thead><tbody>" + tr + "</tbody></table>" return result } $('.btnNext').click(function() { $('.nav-tabs > .active').next('li').find('a').trigger('click'); }); $('.btnPrevious').click(function() { $('.nav-tabs > .active').prev('li').find('a').trigger('click'); });
canvas { display: none } @media print { body * { visibility: hidden; } canvas { visibility: visible; margin-top: 30%; } .form-control { visibility: visible; } .final-results * { visibility: visible; } .final-results, .form-control { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } } table, table tr th, table tr td { border: 1px solid black; }
<!DOCTYPE html> <html lang="en"> <head> <title>Survey Question</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha512-s+xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg==" crossorigin="anonymous"></script> </head> <body> <section class="container py-4"> <div class="row"> <div class="col-md-12"> <h2>Survey</h2> <ul id="tabs" class="nav nav-tabs"> <li class="nav-item"><a href="" data-target="#personalInfo" data-toggle="tab" class="nav-link small text-uppercase active">Personal Info</a></li> <li class="nav-item"><a href="" data-target="#section1" data-toggle="tab" class="nav-link small text-uppercase">Section 1</a></li> <li class="nav-item"><a href="" data-target="#section2" data-toggle="tab" class="nav-link small text-uppercase">Section 2</a></li> <li class="nav-item"><a href="" data-target="#results" data-toggle="tab" class="nav-link small text-uppercase">Results</a></li> </ul> <br> <div id="tabsContent" class="tab-content"> <div id="personalInfo" class="tab-pane fade active show"> <div class="form-group"> <label for="fullName">Full Name address</label> <input type="email" class="form-control" id="fullName" aria-describedby="nameHelp" placeholder="Enter full name"> <small id="nameHelp" class="form-text text-muted">Please enter your full name.</small> </div> <div class="form-group"> <label for="email">Email address</label> <input type="email" class="form-control" id="email" aria-describedby="email" placeholder="Enter email"> <small id="email" class="form-text text-muted">Please enter your valid email address.</small> </div> <div class="form-group"> <label for="age">Password</label> <input type="number" class="form-control" id="age" aria-describedby="age" placeholder="Age"> <small id="age" class="form-text text-muted">Please enter your age in number.</small> </div> <a class="btn btn-primary btnNext">Next</a> </div> <div id="section1" class="tab-pane fade"> <div class="section-1-questions"> <fieldset class="form-group"> <div class="row"> <legend class="col-form-label col-sm-2 pt-0">Question 1:</legend> <div class="col-sm-10"> <div class="form-check section-1"> <input class="form-check-input" type="radio" name="question1" id="gridRadios1" value="1"> <label class="form-check-label" for="gridRadios1"> 1 </label> </div> <div class="form-check section-1"> <input class="form-check-input " type="radio" name="question1" id="gridRadios2" value="2"> <label class="form-check-label" for="gridRadios2"> 2 </label> </div> <div class="form-check section-1"> <input class="form-check-input" type="radio" name="question1" id="gridRadios3" value="3"> <label class="form-check-label" for="gridRadios3"> 3 </label> </div> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row"> <legend class="col-form-label col-sm-2 pt-0">Question 2:</legend> <div class="col-sm-10"> <div class="form-check section-1"> <input class="form-check-input" type="radio" name="question2" id="gridRadios4" value="1"> <label class="form-check-label" for="gridRadios4"> 1 </label> </div> <div class="form-check section-1"> <input class="form-check-input" type="radio" name="question2" id="gridRadios5" value="2"> <label class="form-check-label" for="gridRadios5"> 2 </label> </div> <div class="form-check section-1"> <input class="form-check-input" type="radio" name="question2" id="gridRadios6" value="3"> <label class="form-check-label" for="gridRadios6"> 3 </label> </div> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row"> <legend class="col-form-label col-sm-2 pt-0">Question 3:</legend> <div class="col-sm-10"> <div class="form-check section-1"> <input class="form-check-input" type="radio" name="question3" id="gridRadios7" value="1"> <label class="form-check-label" for="gridRadios7"> 1 </label> </div> <div class="form-check section-1"> <input class="form-check-input" type="radio" name="question3" id="gridRadios8" value="2"> <label class="form-check-label" for="gridRadios8"> 2 </label> </div> <div class="form-check section-1"> <input class="form-check-input" type="radio" name="question3" id="gridRadios9" value="3"> <label class="form-check-label" for="gridRadios9"> 3 </label> </div> </div> </div> </fieldset> </div> <a class="btn btn-primary btnNext">Next</a> <a class="btn btn-primary btnPrevious">Previous</a> </div> <div id="section2" class="tab-pane fade"> <div class="section-2-question"> <fieldset class="form-group"> <div class="row"> <legend class="col-form-label col-sm-2 pt-0">Question 4:</legend> <div class="col-sm-10"> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question4" id="gridRadios10" value="1"> <label class="form-check-label" for="gridRadios10"> 1 </label> </div> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question4" id="gridRadios11" value="2"> <label class="form-check-label" for="gridRadios11"> 2 </label> </div> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question4" id="gridRadios12" value="3"> <label class="form-check-label" for="gridRadios12"> 3 </label> </div> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row"> <legend class="col-form-label col-sm-2 pt-0">Question 5:</legend> <div class="col-sm-10"> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question5" id="gridRadios13" value="1"> <label class="form-check-label" for="gridRadios13"> 1 </label> </div> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question5" id="gridRadios14" value="2"> <label class="form-check-label" for="gridRadios14"> 2 </label> </div> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question5" id="gridRadios15" value="3"> <label class="form-check-label" for="gridRadios15"> 3 </label> </div> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row"> <legend class="col-form-label col-sm-2 pt-0">Question 4:</legend> <div class="col-sm-10"> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question6" id="gridRadios16" value="1"> <label class="form-check-label" for="gridRadios16"> 1 </label> </div> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question6" id="gridRadios17" value="2"> <label class="form-check-label" for="gridRadios17"> 2 </label> </div> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question6" id="gridRadios18" value="3"> <label class="form-check-label" for="gridRadios18"> 3 </label> </div> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row"> <legend class="col-form-label col-sm-2 pt-0">Question 4:</legend> <div class="col-sm-10"> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question7" id="gridRadios19" value="1"> <label class="form-check-label" for="gridRadios19"> 1 </label> </div> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question7" id="gridRadios20" value="2"> <label class="form-check-label" for="gridRadios20"> 2 </label> </div> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question7" id="gridRadios21" value="3"> <label class="form-check-label" for="gridRadios21"> 3 </label> </div> </div> </div> </fieldset> </div> <a class="btn btn-primary btnNext">Next</a> <a class="btn btn-primary btnPrevious">Previous</a> </div> <div id="results" class="tab-pane fade"> <div class="final-results"></div> <br> <canvas id="resultsChart"></canvas> <br> <button type="button" class="btn btn-success" onclick="displayRadioValue()"> Show Results </button> <br> <br> <div id="control" style="display: none"> <a id="toemail" class="btn btn-link" href="mailto:youremail@domain.com?subject=Survey response&body=">Send to email</a> <button onclick="window.print();" class="btn btn-warning">Send to PDF</button> </div> </div> </div> </div> </div> </section> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2020-09-20 17:51:38
Your issue is in this line:您的问题在这一行：
$('.nav-tabs > .active').
The active element is an anchor whose parent is the li and so the ul.活动元素是一个锚，其父元素是 li，因此是 ul。 Hence you need to replace with:因此，您需要替换为：
$('.nav-tabs .active').closest('li')
or, just to be more clear:或者，只是为了更清楚：
$('ul.nav-tabs li.nav-item a.active').closest('li')
Working snippet:工作片段：
function displayRadioValue() { let section1 = document.querySelectorAll('.section-1 > input[type="radio"]') let section2 = document.querySelectorAll('.section-2 > input[type="radio"]') let fullName = document.querySelector('#fullName').value let email = document.querySelector('#email').value let age = document.querySelector('#age').value var ctx = document.querySelector('#resultsChart').getContext('2d'); let section1Total = 0 let section2Total = 0 let section1Question = 0 let section2Question = 0 let finalResults = document.querySelector('.final-results') let result1 = '' let result2 = '' finalResults.innerHTML = '' //Section 1 section1.forEach(function(radio, index) { if (radio.checked) { section2Question++ section1Total += +radio.value } }) //Section 2 section2.forEach(function(radio, index) { if (radio.checked) { section1Question++ section2Total += +radio.value } }) var options = { type: 'bar', data: { labels: ["Section 1", "Section 2"], datasets: [{ label: 'Total Scored', data: [section1Question, section2Question, 30], backgroundColor: '#E91E63', borderWidth: 1 }, { label: 'Percentage %', data: [((section1Total / (section1Question * 3)) * 100).toFixed(2), ((section2Total / (section2Question * 3)) * 100).toFixed(2), 30], backgroundColor: '#004D40', borderWidth: 1 } ] }, options: { scales: { responsive: true, yAxes: [{ ticks: { reverse: false } }] } } } //Final Results and validation if (fullName.value != '' && email.value != '' && age.value != '') { if (section1Total > 0 && section2Total > 0) { finalResults.innerHTML += genDetails(fullName, email, age) finalResults.innerHTML += "<h2>Results</h2>" finalResults.innerHTML += genTable(section1Question, section1Total, 1) finalResults.innerHTML += genTable(section2Question, section2Total, 2) finalResults.innerHTML += "<h2>Chart Results</h2>" document.getElementById("control").style.display = "block"; document.getElementById("resultsChart").style.display = "block"; document.getElementById("toemail").href += document.querySelector(".final-results").innerText; new Chart(ctx, options); //show chart } else { finalResults.innerHTML = 'Snap! Please select the atleast one survey question from each section ' } } else { finalResults.innerHTML = 'Snap! Please enter your name, emial, age in the first section ' } } function genDetails(name, email, age) { var result = "<h2>Personal Info</h2>" result += "<b>Full name:</b> <span>" + name + "</span><br>" result += "<b>Email name:</b> <span>" + email + "</span><br>" result += "<b>Age: </b> <span>" + age + "</span><br>" return result } function genTable(ques, total, section) { var result = "<b>Section " + section + ":</b><br>" var tr = "<tr><th>" + total + "</th><th>" + ((total / (ques * 3)) * 100).toFixed(2) + "</th></tr>" result += "<table><thead><tr><th>Total Score</th><th>Percentage</th></tr></thead><tbody>" + tr + "</tbody></table>" return result } $('.btnNext').click(function(){ $('.nav-tabs .active').closest('li').next('li').find('a').trigger('click'); }); $('.btnPrevious').click(function(){ $('.nav-tabs .active').closest('li').prev('li').find('a').trigger('click'); });
canvas { display: none } @media print { body * { visibility: hidden; } canvas { visibility: visible; margin-top: 30%; } .form-control { visibility: visible; } .final-results * { visibility: visible; } .final-results, .form-control { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } } table, table tr th, table tr td { border: 1px solid black; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <section class="container py-4"> <div class="row"> <div class="col-md-12"> <h2>Survey</h2> <ul id="tabs" class="nav nav-tabs"> <li class="nav-item"><a href="" data-target="#personalInfo" data-toggle="tab" class="nav-link small text-uppercase active">Personal Info</a></li> <li class="nav-item"><a href="" data-target="#section1" data-toggle="tab" class="nav-link small text-uppercase">Section 1</a></li> <li class="nav-item"><a href="" data-target="#section2" data-toggle="tab" class="nav-link small text-uppercase">Section 2</a></li> <li class="nav-item"><a href="" data-target="#results" data-toggle="tab" class="nav-link small text-uppercase">Results</a></li> </ul> <br> <div id="tabsContent" class="tab-content"> <div id="personalInfo" class="tab-pane fade active show"> <div class="form-group"> <label for="fullName">Full Name address</label> <input type="email" class="form-control" id="fullName" aria-describedby="nameHelp" placeholder="Enter full name"> <small id="nameHelp" class="form-text text-muted">Please enter your full name.</small> </div> <div class="form-group"> <label for="email">Email address</label> <input type="email" class="form-control" id="email" aria-describedby="email" placeholder="Enter email"> <small id="email" class="form-text text-muted">Please enter your valid email address.</small> </div> <div class="form-group"> <label for="age">Password</label> <input type="number" class="form-control" id="age" aria-describedby="age" placeholder="Age"> <small id="age" class="form-text text-muted">Please enter your age in number.</small> </div> <a class="btn btn-primary btnNext" >Next</a> </div> <div id="section1" class="tab-pane fade"> <div class="section-1-questions"> <fieldset class="form-group"> <div class="row"> <legend class="col-form-label col-sm-2 pt-0">Question 1:</legend> <div class="col-sm-10"> <div class="form-check section-1"> <input class="form-check-input" type="radio" name="question1" id="gridRadios1" value="1"> <label class="form-check-label" for="gridRadios1"> 1 </label> </div> <div class="form-check section-1"> <input class="form-check-input " type="radio" name="question1" id="gridRadios2" value="2"> <label class="form-check-label" for="gridRadios2"> 2 </label> </div> <div class="form-check section-1"> <input class="form-check-input" type="radio" name="question1" id="gridRadios3" value="3"> <label class="form-check-label" for="gridRadios3"> 3 </label> </div> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row"> <legend class="col-form-label col-sm-2 pt-0">Question 2:</legend> <div class="col-sm-10"> <div class="form-check section-1"> <input class="form-check-input" type="radio" name="question2" id="gridRadios4" value="1"> <label class="form-check-label" for="gridRadios4"> 1 </label> </div> <div class="form-check section-1"> <input class="form-check-input" type="radio" name="question2" id="gridRadios5" value="2"> <label class="form-check-label" for="gridRadios5"> 2 </label> </div> <div class="form-check section-1"> <input class="form-check-input" type="radio" name="question2" id="gridRadios6" value="3"> <label class="form-check-label" for="gridRadios6"> 3 </label> </div> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row"> <legend class="col-form-label col-sm-2 pt-0">Question 3:</legend> <div class="col-sm-10"> <div class="form-check section-1"> <input class="form-check-input" type="radio" name="question3" id="gridRadios7" value="1"> <label class="form-check-label" for="gridRadios7"> 1 </label> </div> <div class="form-check section-1"> <input class="form-check-input" type="radio" name="question3" id="gridRadios8" value="2"> <label class="form-check-label" for="gridRadios8"> 2 </label> </div> <div class="form-check section-1"> <input class="form-check-input" type="radio" name="question3" id="gridRadios9" value="3"> <label class="form-check-label" for="gridRadios9"> 3 </label> </div> </div> </div> </fieldset> </div> <a class="btn btn-primary btnNext" >Next</a> <a class="btn btn-primary btnPrevious" >Previous</a> </div> <div id="section2" class="tab-pane fade"> <div class="section-2-question"> <fieldset class="form-group"> <div class="row"> <legend class="col-form-label col-sm-2 pt-0">Question 4:</legend> <div class="col-sm-10"> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question4" id="gridRadios10" value="1"> <label class="form-check-label" for="gridRadios10"> 1 </label> </div> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question4" id="gridRadios11" value="2"> <label class="form-check-label" for="gridRadios11"> 2 </label> </div> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question4" id="gridRadios12" value="3"> <label class="form-check-label" for="gridRadios12"> 3 </label> </div> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row"> <legend class="col-form-label col-sm-2 pt-0">Question 5:</legend> <div class="col-sm-10"> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question5" id="gridRadios13" value="1"> <label class="form-check-label" for="gridRadios13"> 1 </label> </div> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question5" id="gridRadios14" value="2"> <label class="form-check-label" for="gridRadios14"> 2 </label> </div> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question5" id="gridRadios15" value="3"> <label class="form-check-label" for="gridRadios15"> 3 </label> </div> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row"> <legend class="col-form-label col-sm-2 pt-0">Question 4:</legend> <div class="col-sm-10"> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question6" id="gridRadios16" value="1"> <label class="form-check-label" for="gridRadios16"> 1 </label> </div> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question6" id="gridRadios17" value="2"> <label class="form-check-label" for="gridRadios17"> 2 </label> </div> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question6" id="gridRadios18" value="3"> <label class="form-check-label" for="gridRadios18"> 3 </label> </div> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row"> <legend class="col-form-label col-sm-2 pt-0">Question 4:</legend> <div class="col-sm-10"> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question7" id="gridRadios19" value="1"> <label class="form-check-label" for="gridRadios19"> 1 </label> </div> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question7" id="gridRadios20" value="2"> <label class="form-check-label" for="gridRadios20"> 2 </label> </div> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question7" id="gridRadios21" value="3"> <label class="form-check-label" for="gridRadios21"> 3 </label> </div> </div> </div> </fieldset> </div> <a class="btn btn-primary btnNext" >Next</a> <a class="btn btn-primary btnPrevious" >Previous</a> </div> <div id="results" class="tab-pane fade"> <div class="final-results"></div> <br> <canvas id="resultsChart"></canvas> <br> <button type="button" class="btn btn-success" onclick="displayRadioValue()"> Show Results </button> <br> <br> <div id="control" style="display: none"> <a id="toemail" class="btn btn-link" href="mailto:youremail@domain.com?subject=Survey response&body=">Send to email</a> <button onclick="window.print();" class="btn btn-warning">Send to PDF</button> </div> </div> </div> </div> </div> </section>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
添加“下一页”和“上一页”按钮的功能 - Functionality to add a “next page” and “previous page” button
如何在新页面中显示 JS/Html 调查结果？ - How to show the result of JS/Html survey in a new page?
纯JS中表格元素的下一个/上一个按钮 - Next/Previous button for table elements in pure JS
带有上一个，暂停和下一个按钮的JS文本循环 - JS Text Loop with Previous, Pause & Next Button
创建上一个/下一个html页面导航 - Create previous/next html page navigation
使用Java脚本加载下一个上一个html页面 - load next previous html page with java script
如何使用下一个，上一个和关闭按钮添加搜索栏以在html主页中搜索文本 - How to add Search Bar with Next, Previous and close Button to search text in main html page
html 页面中每张照片的下一个前一个锚点 - next previous anchor for each photos in a html page
返回上一页而不是下一个js中的上一个网址 - Back to previous page instead of previous url in next js
为什么当我按下播放上一个或播放下一个按钮时我的播放暂停按钮会移动（HTML、CSS、JS） - Why is my play-pause-button moving when i press the play-previous or play-next button (HTML, CSS, JS)
相关标签