我有一个多步骤表单,我想在页面底部添加一个按钮,以便用户可以单击下一步而不是单击顶部的选项卡。
但是该按钮有效,当我单击下一步时,选项卡的背景颜色不会改变。
<div class="right-col">
<div class="profile-content"
<ul id="profile-tabs" class="nav nav-tabs">
<li class="active">
<a href="#customer-tab" data-toggle="tab">Customer Info</a>
</li>
<li>
<a href="#lead-tab" data-toggle="tab">Lead Info</a>
</li>
</ul>
<div class="tab-content tab-content-bordered panel-padding">
<div class="widget-article-comments tab-pane panel no-padding no-border fade in active" id="profile-tabs-board">
<form class="form-horizontal" action="leads_add_php.php" method="post" name="form1">
<div class="form-group">
<label for="tag" class="col-sm-3 control-label">Tag</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="tag" name="tag" placeholder="Tag" onchange="document.getElementById('output_tag').innerHTML = this.value"/>
</div>
</div>
<button type="button" id="next" name="next" class="btn btn-primary">Primary</button>
<script>
$("#next").click(function(){
$("#customer-tab").removeClass("active");
$("#leads-tab").addClass("active");
$("#leads-tab .theme-default .nav-tabs .a").css("background", "red");
});
</script>
</div>
这是我检查元素时的 CSS
element.style {
}
.theme-default .nav-tabs>li.active>a, .theme-default .nav-tabs>li.active>a:focus, .theme-default .nav-tabs>li.active>a:hover {
background: #1d89cf;
border-bottom: 2px solid #1a7ab9;
}
最佳答案
你必须在 li 标签上设置 id 并给出它的颜色。
$(document).ready(function(){
$("#next").click(function(){
$("#licustomer-tab").removeClass("active");
$("#lileads-tab").addClass("active");
$("#profile-tabs .active a").css("background-color", "red");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.theme-default .nav-tabs>li.active>a, .theme-default .nav-tabs>li.active>a:focus, .theme-default .nav-tabs>li.active>a:hover {
background: #1d89cf;
border-bottom: 2px solid #1a7ab9;
}
</style>
<div class="right-col">
<div class="profile-content">
<ul id="profile-tabs" class="nav nav-tabs">
<li class="active" id="licustomer-tab">
<a href="#customer-tab" data-toggle="tab">Customer Info</a>
</li>
<li id="lileads-tab">
<a href="#lead-tab" data-toggle="tab">Lead Info</a>
</li>
</ul>
<div class="tab-content tab-content-bordered panel-padding">
<div class="widget-article-comments tab-pane panel no-padding no-border fade in active" id="profile-tabs-board">
<form class="form-horizontal" action="leads_add_php.php" method="post" name="form1">
<div class="form-group">
<label for="tag" class="col-sm-3 control-label">Tag</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="tag" name="tag" placeholder="Tag" onchange="document.getElementById('output_tag').innerHTML = this.value"/>
</div>
</div>
<button type="button" id="next" name="next" class="btn btn-primary">Primary</button>
</div>
关于javascript - 单击按钮时更改选项卡颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38966870/