标签无法在jQuery中使用？

Question

I need to create tabs in a reservation form (3 tabs) that contain text boxes for the user to fill out then submit. 我需要在预订表单（3个选项卡）中创建一个选项卡，其中包含供用户填写然后提交的文本框。 I can't seem to get it to work though and I'm not sure why? 我似乎无法使其正常运行，我不确定为什么吗？ Did I place the content (the text boxes) in the wrong place? 我是否将内容（文本框）放在错误的位置？

 $(document).ready(function() { //tabs function $("#reservation_tabs").tabs(); var emailPattern = /\\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,4}\\b/; // add a span element after each text box $(":text").after("<span class='error'>*</span>"); // move the focus to the first text box $("#arrival_date").focus(); // the handler for the submit event of the form // executed when the submit button is clicked $("#reservation_form").submit( function(event) { var isValid = true; // validate the requested arrival date if ($("#arrival_date").val() == "") { $("#arrival_date").next().text("This field is required."); isValid = false; } else { $("#arrival_date").next().text(""); } // validate the number of nights if ($("#nights").val() == "") { $("#nights").next().text("This field is required."); isValid = false; } else if (isNaN($("#nights").val())) { $("#nights").next().text("This field must be numeric."); isValid = false; } else { $("#nights").next().text(""); } // validate the name entry var name = $("#name").val().trim(); if (name == "") { $("#name").next().text("This field is required."); isValid = false; } else { $("#name").val(name); $("#name").next().text(""); } // validate the email entry with a regular expression var email = $("#email").val(); if (email == "") { $("#email").next().text("This field is required."); isValid = false; } else if ( !emailPattern.test(email) ) { $("#email").next().text("Must be a valid email address."); isValid = false; } else { $("#email").next().text(""); } // validate the phone number if ($("#phone").val() == "") { $("#phone").next().text("This field is required."); isValid = false; } else { $("#phone").next().text(""); } // prevent the submission of the form if any entries are invalid if (isValid == false) { event.preventDefault(); } } // end function ); // end submit }); // end ready

 body { font-family: Arial, Helvetica, sans-serif; font-size: 87.5%; background-color: white; margin: 0 auto; width: 600px; border: 3px solid blue; padding: 10px 20px; } legend { color: blue; font-weight: bold; margin-bottom: .8em; } label { float: left; width: 100px; } input, select { margin-left: 1em; margin-right: 1em; margin-bottom: .5em; } input { width: 14em; } input.left { width: 1em; padding-left: 0; } fieldset { border: none; margin-left: 0; margin-top: 1em; padding: 0; } input.last { margin-bottom: 1em; } #adults, #children { width: 35px; } #smoking { width: 1em; margin-left: 0; } #policies { margin-left: 0; width: 15em; } #submit { width: 10em; } #dialog p { font-size: 85%; } .error { float: none; color: red; font-size: 85%; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Reservation request</title> <link rel="stylesheet" href="main.css"> <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="reservation.js"></script> </head> <body> <h1>Reservation Request</h1> <form action="response.html" method="get" name="reservation_form" id="reservation_form"> <div id="reservation_tabs"> <ul> <li><a href="#general_information">General Information</a></li> <li><a href="#preferences">Preferences</a></li> <li><a href="#contact_information">Contact Information</a></li> </ul> <div id="general_information"> <label for="arrival_date">Arrival date:</label> <input type="text" name="arrival_date" id="arrival_date" autofocus><br> <label for="nights">Nights:</label> <input type="text" name="nights" id="nights"><br> <label>Adults:</label> <select name="adults" id="adults"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select><br> <label>Children:</label> <select name="children" id="children"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select><br> </div> <div id="preferences"> <label>Room type:</label> <input type="radio" name="room" id="standard" class="left" checked>Standard&nbsp;&nbsp;&nbsp; <input type="radio" name="room" id="business" class="left">Business&nbsp;&nbsp;&nbsp; <input type="radio" name="room" id="suite" class="left last">Suite<br> <label>Bed type:</label> <input type="radio" name="bed" id="king" class="left" checked>King&nbsp;&nbsp;&nbsp; <input type="radio" name="bed" id="double" class="left last">Double Double<br> <input type="checkbox" name="smoking" id="smoking">Smoking<br> </div> <div id="contact_information"> <label for="name">Name:</label> <input type="text" name="name" id="name"><br> <label for="email">Email:</label> <input type="text" name="email" id="email"><br> <label for="phone">Phone:</label> <input type="text" name="phone" id="phone" placeholder="999-999-9999"><br> </div> </div> <fieldset> <input type="button" id="policies" value="View Cancellation Policies"> <input type="submit" id="submit" value="Submit Request"> <div id="dialog" title="Cancellation Policies" style="display: none;"> <p>Notification of cancellation or arrival date change must be received more than three days (72 hours) prior to the confirmed arrival date for the reservation deposit to be refundable. Email notification is acceptable, and a cancellation confirmation will be sent to you. Failure to check-in on the scheduled arrival date will result in the cancellation of the reservation including any remaining nights, and the reservation deposit shall be forfeited.</p> </div><br> </fieldset> </form> </body> </html>

Answer 1

Tabs are part of the jQuery UI https://jqueryui.com/tabs/ lib (it's different file than the jQuery itself, so you need them both) which you haven't referenced. 选项卡是jQuery UI https://jqueryui.com/tabs/ lib（它是与jQuery本身不同的文件，因此您都需要它们）的一部分，但未参考。 (cdns here ) （这里是 cdns）

标签无法在jQuery中使用？

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-04-28 07:21:35

标签无法在jQuery中使用？

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-04-28 07:21:35

解决方案1
0 已采纳 2017-04-28 07:21:35