Rock Rock - 22 days ago 5
HTML Question

Anchors within the Same page are not working properly

I'm trying to link to elements within the HTML of my page, but it's not working and I don't know why.

I don't seem to find any error in this.I am just unsure why it's not working. It just shows the name of the link i.e. f1, f2 or f3 in the URL but won't link to that particular section. It actually should not show the anchors in the URL, but not sure what is wrong.

I'd like all the links's in this list to be links to three ids:

Links:



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

Please go through the above code. The markups you were missing is added. Please not the role="tablist" and role="tabpanel" Those are important to render the proper design. Hope this will help you.