2
我在如何解決這個問題。基本上我使用引導模式中的選項卡，並使用按鈕從一個標籤導航到另一個。我爲此合併了jquery。但我也寫了一個jQuery允許我選擇多個單選按鈕（使用值），但當我合併jQuery庫它似乎停止導航發生，當我刪除此jquery導航strrats發生。我相信這是因爲單選按鈕的jquery是v1.3.2，而導航是v2.1.1。但是我需要使用兩者來滿足要求？請建議如何解決此問題。下面是代碼：引導程序中的Tab導航不能與另一個jQuery一起工作
$(document).ready(function(){
$("#selectINTI").click(function() {
$('input:radio[name=app_decision]:nth(0)').attr('checked',true);
//$('input:radio[name=app_decision]')[0].checked = true;
});
$("#selectINTE").click(function() {
$('input:radio[name=app_decision]:nth(1)').attr('checked',true);
//$('input:radio[name=app_decision]')[1].checked = true;
});
$("#selectR").click(function() {
$('input:radio[name=app_decision]:nth(2)').attr('checked',true);
//$('input:radio[name=app_decision]')[2].checked = true;
});
});
$('.btnNext').click(function(){
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function(){
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});fieldset {
border:2px solid black;
border-radius:10px;
padding:20px;
position:relative;
}
legend {
background: #FF9;
border: solid 1px black;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
padding: 4px;
margin:0px;
}
.modal .modal-dialog {
width: 90%;
}<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>admission_dec</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--This is Jquery to select the multiple radio button on click of button-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<fieldset>
<legend><i class="fa fa-search" aria-hidden="true"></i> Search</legend>
<div class="row">
<div class ="form-inline">
<div class="col-sm-4">
<label for="acad_period">Academic Year</label>
<input class="form-control input-sm" name="acad_period" required>
</div>
<div class="col-sm-4">
<label for="stuclass">Class</label>
<select name="stuclass" class="form-control" required>
<option value="">Please select...</option>
<option value="13">XII</option>
<option value="12">XI</option>
<option value="11">X</option>
<option value="10">IX</option>
<option value="9">VIII</option>
<option value="8">VII</option>
<option value="7">VI</option>
<option value="6">V</option>
<option value="5">IV</option>
<option value="4">III</option>
<option value="3">II</option>
<option value="2">I</option>
<option value="1">KG/Prep</option>
<option value="Nurs">Nursery</option>
</select>
</div>
<div class="col-sm-4">
<label for="appstatus">Application Status</label>
<select name="appstatus" class="form-control" required>
<option value="">Please select...</option>
<option value="N">New</option>
<option value="INTI">Invited for Interview</option>
<option value="INTE">Invited for Exam</option>
</select>
</div>
</div>
</div>
<br>
<div style="margin-left: 875px;">
<input name="adm_search" value="Search" class="btn btn-success" type="submit">
<input name="adm_cancel" value="Cancel" class="btn btn-danger" type="reset">
<br>
</div>
</fieldset>
<br>
<div class="table-responsive">
<table border="1" cellpadding="2" cellspacing="1" class="table-hover">
<tbody>
<tr>
<th colspan="5" rowspan="1" style="vertical-align: top; width: 142x; text-align: left;"><i class="fa fa-th-list" aria-hidden="true"></i> Result</th>
<th style="vertical-align: top; width: 323px; text-align: center;">Decision</th>
</tr>
<tr>
<th></th>
<th style="vertical-align: top; width: 120px; text-align: center;">Student ID</th>
<th style="vertical-align: top; width: 250px; text-align: center;">Name</th>
<th style="vertical-align: top; width: 65px; text-align: center;">App.Status</th>
<th style="vertical-align: top; width: 65px; text-align: center;">App.Date</th>
<th style="vertical-align: top; width: 350px;">
<button name="app_intall" class="btn btn-info btn-md" value="Interview All" id="selectINTI"><span class="glyphicon glyphicon-user"></span>Interview All</button>
<button name="app_eall" class="btn btn-info btn-md" value="Exam All" id="selectINTE"><span class="glyphicon glyphicon-edit"></span>Exam All</button>
<button name="app_rall" class="btn btn-info btn-md" value="Reject All" id="selectR"><span class="glyphicon glyphicon-remove"></span>Reject All</button>
</th>
</tr>
<tr>
<td style="vertical-align: top; width: 79px;">
<button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#myModal">
<span class="glyphicon glyphicon-eye-open"></span> View</button>
</td>
<td style="vertical-align: top; width: 149px;"></td>
<td style="vertical-align: top; width: 250px;"></td>
<td style="vertical-align: top; width: 145px;"></td>
<td style="vertical-align: top; width: 140px;"></td>
<td style="vertical-align: top; width:120px; text-align: center;">
<input name="app_decision" value="INTI" type="radio" >Interview
<input name="app_decision" value="INTE" type="radio">Exam
<input name="app_decision" value="R" type="radio">Reject
</td>
</tr>
</tbody>
</table>
</div>
<br>
<div style="margin-left: 875px;">
<button type="button" name="adm_submit" class="btn btn-success"><span class="glyphicon glyphicon-ok"></span> Process</button>
<button type="reset" name="adm_cancel" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
</div>
<!-- The Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Student Appilcation Form</h4>
</div>
<div class="modal-body">
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#tab1" aria-controls="appdetailTab" role="tab" data-toggle="tab">Applicant Detail</a>
</li>
<li role="presentation"><a href="#tab2" aria-controls="adddetailTab" role="tab" data-toggle="tab">Additional Details</a>
</li>
<li role="presentation"><a href="#fdetailTab" aria-controls="fdetailTab" role="tab" data-toggle="tab">Father's Detail</a>
</li>
<li role="presentation"><a href="#mdetailTab" aria-controls="mdetailTab" role="tab" data-toggle="tab">Mother's Detail</a>
</li>
<li role="presentation"><a href="#gdetailTab" aria-controls="gdetailTab" role="tab" data-toggle="tab">Guardian's Detail</a>
</li>
<li role="presentation"><a href="#sdetailTab" aria-controls="sdetailTab" role="tab" data-toggle="tab">Sibling's Detail</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">
<br>
<fieldset>
<legend>Personal Details</legend>
<div class ="form-inline">
<div class="col-sm-3">
<img src="file:///C:/Users/Gaurav/Pictures/Saved%20Pictures/test%20photo.jpg" alt="Student image" style="border: 2px solid ; width: 165px; height: 214px;" align="right" hspace="5" vspace="1">
</div>
<div class="col-sm-3">
<label for="stutitle">Title</label>
<input class="form-control input-sm" name="stutitle" readonly>
</div>
<div class="col-sm-3">
<label for="stugender">Gender</label>
<input class="form-control input-sm" name="stugender" readonly>
</div>
<div class="col-sm-3">
<label for="stuage">Age(yrs)</label>
<input class="form-control input-sm" name="stuage" readonly>
</div>
</div>
<div class ="form-inline">
<div class="col-sm-3">
<br>
<label for="stufname">Firstname</label>
<input class="form-control input-sm" name="stufname" readonly>
</div>
<div class="col-sm-3">
<br>
<label for="stuheight">Height(cm)</label>
<input class="form-control input-sm" name="stuheight" readonly>
</div>
<div class="col-sm-3">
<br>
<label for="stmdob">Birthdate</label>
<input class="form-control input-sm" name="studob" readonly>
</div>
</div>
<div class ="form-inline">
<div class="col-sm-3">
<br>
<label for="stsname">Surname</label>
<input name="stusname" class="form-control input-sm" readonly>
</div>
<br>
<div class="col-sm-3">
<br>
<label for="stumobile">Mobile</label>
<input name="stumobile" class="form-control input-sm" readonly>
</div>
<div class="col-sm-3">
<br>
<label for="stuhphone">Homephone</label>
<input name="stuhphone" class="form-control input-sm" readonly>
</div>
</div>
<div class="col-sm-3">
<br>
<label for="stunatn">Nationality</label>
<input name="stunatn" class="form-control input-sm" readonly>
</div>
<div class="col-sm-3">
<br>
<label for="stsname">Middlename</label>
<input name="stumname" class="form-control input-sm" readonly>
</div>
<br>
<div class="col-sm-3">
<br>
<label for="stuemail">Email Address</label>
<input size="52" class="form-control input-sm" name="stuemail" readonly>
</div>
</fieldset>
<br>
<fieldset>
<legend>Address Details</legend>
<div class="form-inline">
<div class="col-sm-6">
<label for="stuadd1">Address Line 1</label>
<input name="stuadd1" size="40" class="form-control input-sm" readonly>
</div>
<div class="col-sm-6">
<label for="stuadd2">Address Line 2</label>
<input name="stuadd2" size="40" class="form-control input-sm" readonly>
</div>
</div>
<br><br>
<div class="form-inline">
<div class="col-sm-6">
<label for="stuadd3">Address Line 3</label>
<input name="stuadd3" size="40" class="form-control input-sm" readonly>
</div>
<div class="col-sm-6">
<label for="stucity">City</label>
<input name="stucity" class="form-control input-sm" readonly>
</div>
</div>
<br><br>
<div class="form-inline">
<div class="col-sm-4">
<label for="stustate">State</label>
<input name="stustate" class="form-control input-sm" readonly>
</div>
<div class="col-sm-4">
<label for="stucountry">Country</label>
<input name="stucountry" class="form-control input-sm" readonly>
</div>
<div class="col-sm-4">
<label for="stupostcode">Pincode</label>
<input name="stupostcode" class="form-control input-sm" readonly>
</div>
</div>
</fieldset>
<br>
<fieldset>
<legend>Application Details</legend>
<div class="form-inline">
<div class="col-sm-6">
<label for="appclass_applied" >Class Applied for</label>
<input name="appclass_applied" class="form-control input-sm" readonly>
</div>
<div class="col-sm-6">
<label for="acad_period" >Year Applied for</label>
<input name="acad_period" class="form-control input-sm" readonly>
</div>
</div>
<br>
<br>
<div class="form-inline">
<div class="col-sm-3">
<label for="app_prevclass">Previous Class</label>
<input name="app_prevclass" size="5" class="form-control input-sm" readonly>
</div>
<div class="col-sm-3">
<label>Year Passed</label>
<input name="app_prevyear" size="5" class="form-control input-sm" readonly>
</div>
<div class="col-sm-6">
<label for="app_prevcgpaper">Previous CGPA/Percentage</label>
<input name="app_prevcgpaper" size="5" class="form-control input-sm" readonly>
</div>
</div>
<br>
<br>
<div class="form-inline">
<div class="col-sm-5">
<label for="app_prevschlname">Previous School Name</label>
<input name="app_prevschlname" type="text" class="form-control input-sm" readonly>
</div>
<div class="col-sm-7">
<label>Previous School Board</label>
<input name="app_prevboard" type="text" class="form-control input-sm" readonly>
<input name="app_prevboard_oth" class="form-control input-sm" readonly>
</div>
</div>
</fieldset>
<br>
<p class="tabnav" align="right">
<a rel="nofollow" rel="noreferrer" class="btn btn-primary btnNext" >Next >> </a>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</p>
</div>
<div role="tabpanel" class="tab-pane" id="tab2">
<div class="form-inline">
<div class="col-sm-6">
<br>
<label for="stublgrp">Blood Group</label>
<input name="stublgrp" class="form-control input-sm" readonly>
</div>
<div class="col-sm-6">
<br>
<label for="stuweight">Weight(kg)</label>
<input name="stuweight" class="form-control input-sm" readonly>
</div>
</div>
<div class="form-inline">
<div class="col-sm-12">
<br>
<label>Student Category</label>
<input name="stucategory" class="form-control input-sm" readonly>
<input name="stucato" class="form-control input-sm" readonly>
</div>
</div>
<div class="form-inline">
<div class="col-sm-6">
<br>
<label>Allergy ?</label>
<input name="stuallergy_yes" class="form-control input-sm" readonly>
</div>
<div class="col-sm-6">
<br>
<label>Disability ?</label>
<input name="studisability_yes" class="form-control input-sm" readonly>
</div>
</div>
<div class="form-inline">
<div class="col-sm-6">
<br>
<label>Transport needed ?</label>
<input name="stutransport" class="form-control input-sm" readonly>
</div>
<div class="col-sm-6">
<br>
<label>School Distance (km)</label>
<input name="stutransport_dist" class="form-control input-sm" readonly>
</div>
</div>
<div class="form-inline">
<div class="col-sm-4">
<br>
<label for="stubplace">Birth Place</label>
<input name="stubplace" class="form-control input-sm" readonly>
</div>
<div class="col-sm-4">
<br>
<label for="stumthtng">Mother Tongue</label>
<input name="stumthtng" class="form-control input-sm" readonly>
</div>
<div class="col-sm-4">
<br>
<label for="stureligion">Religion</label>
<input name="stureligion" class="form-control input-sm" readonly>
</div>
</div>
<div class="form-inline">
<div class="col-sm-6">
<br>
<label for="stuidentity">Identity Type</label>
<input name="stuidentity" class="form-control input-sm" readonly>
</div>
<div class="col-sm-6">
<br>
<label for="stuidentitynum">Id Number</label>
<input name="stuidentitynum" class="form-control input-sm" readonly>
<br>
</div>
</div>
<div class="form-inline">
<div class="col-sm-12">
<p class="tabnav" align="right">
<br>
<a class="btn btn-primary btnPrevious"><< Previous</a>
<a rel="nofollow" rel="noreferrer"class="btn btn-primary btnNext" >Next >> </a>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="fdetailTab">
<p class="tabnav" align="right">
<a rel="nofollow" rel="noreferrer"class="btn btn-primary btnNext" >Next >> </a>
<a class="btn btn-primary btnPrevious"><< Previous</a>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</p>
</div>
<div role="tabpanel" class="tab-pane" id="mdetailTab">
<p class="tabnav" align="right">
<a class="btn btn-primary btnPrevious"><< Previous</a>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</p>
</div>
<div role="tabpanel" class="tab-pane" id="gdetailTab">
77777777
<p class="tabnav" align="right">
<a class="btn btn-primary btnPrevious"><< Previous</a>
<a rel="nofollow" rel="noreferrer"class="btn btn-primary btnNext" >Next >> </a>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</p>
</div>
<div role="tabpanel" class="tab-pane" id="sdetailTab">
<br>
<table border="1" cellpadding="2" cellspacing="1" class="table-hover">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
<th>Birthdate</th>
<th>Class</th>
<th>Gende</th>
<th>School Name</th>
</tr>
<tr>
</tr>
</tbody>
</table>
<p class="tabnav" align="right">
<a class="btn btn-primary btnPrevious"><< Previous</a>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
最有可能的，只加載了更高的版本，而忽略下一個將會使雙方的工作.prop功能。你想要什麼是可能的，但是這真的是一個錯誤的方法，就像直升機從角落裏買些麪包一樣。 –
一般而言，您不應該多次包含jQuery，如果您有可以使用的.noConflict（）函數（https://api.jquery.com/jquery.noconflict/）。似乎你並不需要jQuery的兩個版本。 – eric
@eric如果我只合併一個然後另一個不工作所以我必須包括他們兩個。我努力noconflict，但要幫助 –