同一页面中的锚点无法正常工作

Question

我正在尝试链接到我页面HTML中的元素，但它不起作用，我不知道为什么。

我似乎没有发现任何错误。我只是不确定为什么它不起作用。它只显示链接的名称，即URL中的f1，f2或f3，但不会链接到该特定部分。它实际上不应该在URL中显示锚点，但不确定是什么问题。

我希望此列表中的所有链接都是三个ID的链接：

链接：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
First:

<ul class="tabs">
  <li class="active"> <a href="#f1" data-toggle="tab"> Personal Details </a>
  </li>
  <li><a href="#f2" data-toggle="tab">  Official Description </a> 
  </li>
  <li><a href="#f3" data-toggle="tab"> Official Details </a> 
  </li>
</ul>
<div class="progress-indicator"><span></span></div>

<div class="tab-pane with-bg active step1" id="f1">
  <div class="panel panel-default">
    <div class="panel-body table-responsive">
      <div class="col-sm-12">
        <div id="deputationDiv" class="col-md-12">
          <div class="panel panel-default panel-border " style="background:#fcfcfc">
            <div class="panel-body">
              <div class="col-md-6">
                <div class="form-group">
                  <div class="input-group" style="width:100%">
                    <span class="input-group-addon" style="width:40%; text-align:left">Full name</span> 
                    <span class="form-control" style="text-align:right">{{$user->user_name}}</span>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <div class="input-group" style="width:100%">
                    <span class="input-group-addon" style="width:40%; text-align:left">Date of Birth</span> 
                    <span class="form-control" style="text-align:right">{{$user->user_dob}}</span>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <div class="input-group" style="width:100%">
                    <span class="input-group-addon" style="width:40%; text-align:left">Email-id</span> 
                    <span class="form-control" style="text-align:right">{{$user->user_email}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    Second:

    <div class="tab-pane with-bg step2" id="f2">
      <div class="panel panel-default">
        <div class="panel-body table-responsive">
          <div class="col-sm-12">
            <div class="row">
              <div class="col-md-12">
                <div class="panel panel-default panel-border " style="background:#fcfcfc">
                  <div class="panel-body">
                    <div class="col-md-4">
                      <div class="form-group">
                        <div class="input-group" style="width:100%">
                          <span class="input-group-addon" style="width:40%; text-align:left">Employee code</span> 
                          <span class="form-control" style="text-align:left">{{$user->user_employeecode}}</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-group">
                        <div class="input-group" style="width:100%">
                          <span class="input-group-addon" style="width:40%; text-align:left">Employee type</span>
                          <span class="form-control" style="text-align:left">{{$user->user_type}}</span>
                        </div>
                      </div>
                    </div>

                    <div class="col-md-4">
                      <div class="form-group">
                        <div class="input-group" style="width:100%">
                          <span class="input-group-addon" style="width:40%; text-align:left">Batch Year</span> 
                          <span class="form-control" style="text-align:left">{{$user->user_year}}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      Third:

      <div class="tab-pane with-bg step3" id="f3">
        <div class="panel panel-default">
          <div class="panel-body table-responsive">
            <div class="col-sm-12">
              <div class="panel panel-default panel-border " style="background:#fcfcfc">
                <div class="panel-heading">
                  <div class="panel-title">
                    Present PLace
                  </div>
                </div>
                <div class="panel-body">
                  <div class="row">

                    <div class="col-md-4">
                      <div class="form-group">
                        <div class="input-group" style="width:100%">
                          <span class="input-group-addon" style="width:40%; text-align:left">City</span> 
                          <span class="form-control" style="text-align:right">{{$user->user_workcity}}</span>
                        </div>
                      </div>
                    </div>


                    <div class="col-md-4">
                      <div class="form-group">
                        <div class="input-group" style="width:100%">
                          <span class="input-group-addon" style="width:40%; text-align:left">Location</span> 
                          <span class="form-control" style="text-align:right">{{$user->user_loc}}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

Answer 1

在这种情况下，我们不需要路由和控制器信息，它只是一个简单的HTML功能。您的data-toggle代码必须具有不同的ID，例如：data-toggle="tab1"，data-toggle="tab2"和data-toggle="tab3"。此外，您可以删除此数据切换标记，如果您只想要内容的链接（锚点），则不需要它。 请检查代码段中的工作代码。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
First:

<ul class="tabs">
  <li class="active"> <a href="#f1"> Personal Details </a>
  </li>
  <li><a href="#f2">  Official Description </a> 
  </li>
  <li><a href="#f3"> Official Details </a> 
  </li>
</ul>

<div class="tab-pane with-bg active step1" id="f1" data-toggle="tab1">
  <div class="panel panel-default">
    <div class="panel-body table-responsive">
      <div class="col-sm-12">
        <div id="deputationDiv" class="col-md-12">
          <div class="panel panel-default panel-border " style="background:#fcfcfc">
            <div class="panel-body">
              <div class="col-md-6">
                <div class="form-group">
                  <div class="input-group" style="width:100%">
                    <span class="input-group-addon" style="width:40%; text-align:left">Full name</span> 
                    <span class="form-control" style="text-align:right">{{$user->user_name}}</span>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <div class="input-group" style="width:100%">
                    <span class="input-group-addon" style="width:40%; text-align:left">Date of Birth</span> 
                    <span class="form-control" style="text-align:right">{{$user->user_dob}}</span>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <div class="input-group" style="width:100%">
                    <span class="input-group-addon" style="width:40%; text-align:left">Email-id</span> 
                    <span class="form-control" style="text-align:right">{{$user->user_email}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    Second:

    <div class="tab-pane with-bg step2" id="f2" data-toggle="tab2">
      <div class="panel panel-default">
        <div class="panel-body table-responsive">
          <div class="col-sm-12">
            <div class="row">
              <div class="col-md-12">
                <div class="panel panel-default panel-border " style="background:#fcfcfc">
                  <div class="panel-body">
                    <div class="col-md-4">
                      <div class="form-group">
                        <div class="input-group" style="width:100%">
                          <span class="input-group-addon" style="width:40%; text-align:left">Employee code</span> 
                          <span class="form-control" style="text-align:left">{{$user->user_employeecode}}</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-4">
                      <div class="form-group">
                        <div class="input-group" style="width:100%">
                          <span class="input-group-addon" style="width:40%; text-align:left">Employee type</span>
                          <span class="form-control" style="text-align:left">{{$user->user_type}}</span>
                        </div>
                      </div>
                    </div>

                    <div class="col-md-4">
                      <div class="form-group">
                        <div class="input-group" style="width:100%">
                          <span class="input-group-addon" style="width:40%; text-align:left">Batch Year</span> 
                          <span class="form-control" style="text-align:left">{{$user->user_year}}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      Third:

      <div class="tab-pane with-bg step3" id="f3" data-toggle="tab3">
        <div class="panel panel-default">
          <div class="panel-body table-responsive">
            <div class="col-sm-12">
              <div class="panel panel-default panel-border " style="background:#fcfcfc">
                <div class="panel-heading">
                  <div class="panel-title">
                    Present PLace
                  </div>
                </div>
                <div class="panel-body">
                  <div class="row">

                    <div class="col-md-4">
                      <div class="form-group">
                        <div class="input-group" style="width:100%">
                          <span class="input-group-addon" style="width:40%; text-align:left">City</span> 
                          <span class="form-control" style="text-align:right">{{$user->user_workcity}}</span>
                        </div>
                      </div>
                    </div>


                    <div class="col-md-4">
                      <div class="form-group">
                        <div class="input-group" style="width:100%">
                          <span class="input-group-addon" style="width:40%; text-align:left">Location</span> 
                          <span class="form-control" style="text-align:right">{{$user->user_loc}}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

Answer 2

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

<link href="bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs" role="tablist">
  <li class="active"> <a href="#f1" data-toggle="tab"> Personal Details </a>
  </li>
  <li><a href="#f2" data-toggle="tab">  Official Description </a> 
  </li>
  <li><a href="#f3" data-toggle="tab"> Official Details </a> 
  </li>
</ul>
<div class="tab-content">
  <div role="tabpanel" class="tab-pane with-bg active step1" id="f1">
    First
    <div class="panel panel-default">
      <div class="panel-body table-responsive">
        <div class="col-sm-12">
          <div id="deputationDiv" class="col-md-12">
            <div class="panel panel-default panel-border " style="background:#fcfcfc">
              <div class="panel-body">
                <div class="col-md-6">
                  <div class="form-group">
                    <div class="input-group" style="width:100%">
                      <span class="input-group-addon" style="width:40%; text-align:left">Full name</span> 
                      <span class="form-control" style="text-align:right">{{$user->user_name}}</span>
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <div class="input-group" style="width:100%">
                      <span class="input-group-addon" style="width:40%; text-align:left">Date of Birth</span> 
                      <span class="form-control" style="text-align:right">{{$user->user_dob}}</span>
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <div class="input-group" style="width:100%">
                      <span class="input-group-addon" style="width:40%; text-align:left">Email-id</span> 
                      <span class="form-control" style="text-align:right">{{$user->user_email}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div role="tabpanel" class="tab-pane with-bg step2" id="f2">
    Second:
    <div class="panel panel-default">
      <div class="panel-body table-responsive">
        <div class="col-sm-12">
          <div class="row">
            <div class="col-md-12">
              <div class="panel panel-default panel-border " style="background:#fcfcfc">
                <div class="panel-body">
                  <div class="col-md-4">
                    <div class="form-group">
                      <div class="input-group" style="width:100%">
                        <span class="input-group-addon" style="width:40%; text-align:left">Employee code</span> 
                        <span class="form-control" style="text-align:left">{{$user->user_employeecode}}</span>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <div class="input-group" style="width:100%">
                        <span class="input-group-addon" style="width:40%; text-align:left">Employee type</span>
                        <span class="form-control" style="text-align:left">{{$user->user_type}}</span>
                      </div>
                    </div>
                  </div>    
                  <div class="col-md-4">
                    <div class="form-group">
                      <div class="input-group" style="width:100%">
                        <span class="input-group-addon" style="width:40%; text-align:left">Batch Year</span> 
                        <span class="form-control" style="text-align:left">{{$user->user_year}}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div role="tabpanel" class="tab-pane with-bg step3" id="f3">
    Third:
    <div class="panel panel-default">
      <div class="panel-body table-responsive">
        <div class="col-sm-12">
          <div class="panel panel-default panel-border " style="background:#fcfcfc">
            <div class="panel-heading">
              <div class="panel-title">
                Present PLace
              </div>
            </div>
            <div class="panel-body">
              <div class="row">
                <div class="col-md-4">
                  <div class="form-group">
                    <div class="input-group" style="width:100%">
                      <span class="input-group-addon" style="width:40%; text-align:left">City</span> 
                      <span class="form-control" style="text-align:right">{{$user->user_workcity}}</span>
                    </div>
                  </div>
                </div>    
                <div class="col-md-4">
                  <div class="form-group">
                    <div class="input-group" style="width:100%">
                      <span class="input-group-addon" style="width:40%; text-align:left">Location</span> 
                      <span class="form-control" style="text-align:right">{{$user->user_loc}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

请仔细阅读以上代码。添加了您缺少的标记。请不要role="tablist"和role="tabpanel"这些对于呈现正确的设计非常重要。