即使我已将代码从互联网上删除,我的切换标签也无法使用
<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 href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="register.css" rel="stylesheet">
</head>
<body>
<div class="container register">
<div class="row">
<div class="col-md-9 register-right">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item active">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#cust">Customer</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#rest">Restaurant</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="cust" role="tabpanel">
<h3 class="register-heading">Registration for customers</h3>
<div class="row register-form">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="First Name *" value="" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Last Name *" value="" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password *" value="" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Confirm Password *" value="" />
</div>
<div class="form-group">
<div class="maxl">
<label class="radio inline">
<input type="radio" name="gender" value="male" checked>
<span> Male </span>
</label>
<label class="radio inline">
<input type="radio" name="gender" value="female">
<span>Female </span>
</label>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="email" class="form-control" placeholder="Your Email *" value="" />
</div>
<div class="form-group">
<input type="text" minlength="10" maxlength="10" name="txtEmpPhone" class="form-control" placeholder="Your Phone *" value="" />
</div>
<div class="form-group">
<select class="form-control">
<option class="hidden" selected disabled>Please select meal your option</option>
<option>Vegetarian</option>
<option>Non Vegetarian</option>
</select>
</div>
<input type="submit" class="btnRegister" value="Register"/>
</div>
</div>
</div>
<div class="tab-pane fade" id="rest" role="tabpanel">
<h3 class="register-heading">Register your restaurant</h3>
<div class="row register-form">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Restaurant Name *" value="" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Address *" value="" />
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email *" value="" />
</div>
<div class="form-group">
<input type="text" maxlength="10" minlength="10" class="form-control" placeholder="Phone *" value="" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="password" class="form-control" placeholder="Password *" value="" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Confirm Password *" value="" />
</div>
<input type="submit" class="btnRegister" value="Register" />
</div>
默认情况下会显示第一个标签,但我无法切换到另一个标签。我去了开发人员工具部分,没有任何错误。
我正在使用bootstrap v4。我曾尝试更改链接的位置,因为有人在另一个问题中提出了建议,但这对我没有用。
答案 0 :(得分:0)
我不确定您的代码有什么问题,但是当我在代码中自定义后,该代码对我有用。请查看我的代码,如果您有任何疑问,请告诉我。
希望它对您有用。
<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 href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item active">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#cust" role="tab" >
Customer
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#rest" role="tab">
Restaurant
</a>
</li>
</ul>
<div class="tab-content">
<div id="cust" class="tab-pane in active">
<h3>Register your customer</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="rest" class="tab-pane fade">
<h3 class="register-heading">Register your restaurant</h3>
<div class="row register-form">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Restaurant Name *" value="" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Address *" value="" />
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email *" value="" />
</div>
<div class="form-group">
<input type="text" maxlength="10" minlength="10" class="form-control" placeholder="Phone *" value="" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="password" class="form-control" placeholder="Password *" value="" />
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Confirm Password *" value="" />
</div>
<input type="submit" class="btnRegister" value="Register"/>
</div>
</div>
</div>
</div>
</div>