我正在尝试链接到我页面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>
答案 0 :(得分：0)
在这种情况下，我们不需要路由和控制器信息，它只是一个简单的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>
答案 1 :(得分：0)
<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"这些对于呈现正确的设计非常重要。