我使用引导程序的切换标签不起作用

时间:2019-11-13 11:14:35

标签: html css twitter-bootstrap tabs toggle

即使我已将代码从互联网上删除,我的切换标签也无法使用

<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。我曾尝试更改链接的位置,因为有人在另一个问题中提出了建议,但这对我没有用。

1 个答案:

答案 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>