javascript - 选中单选按钮时将 data-toggle 属性添加到锚标记
问题描述
在此处选中单选按钮时
<fieldset id="group1">
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioA4" name="group1" type="radio"/>
<label for="radioA4">Demo text</label>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioA1" name="group1" type="radio"/>
<label for="radioA1">
</label>
</div>
</div>
</div>
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioA2" name="group1" type="radio"/>
<label for="radioA2">Demo</label>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioA3" name="group1" type="radio"/>
<label for="radioA3">Demo</label>
</div>
</div>
</div>
</fieldset>
我想在这部分添加数据切换
<li><a href="#facilities" >House Captain</a></li>所以它看起来像这样
<li><a href="#facilities" data-toggle="tab">House Captain</a></li>这是我尝试过的，但并非全部有效
$('input:radio[name="group1"]').change(
function(){
if (this.checked) {
$(".dropdown-toggle").attr("data-toggle", "tab");
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form action="" method="">
<!-- You can switch " data-color="rose" " with one of the next bright colors: "blue", "green", "orange", "purple" -->
<div class="wizard-header">
<h3 class="wizard-title">
List Your Place
</h3>
<h5>This information will let us know more about your place.</h5>
</div>
<div class="wizard-navigation" id="tabs" >
<ul>
<li><a href="#location" data-toggle="tab" >Head Boy</a></li>
<li><a id="tab2" href="#type" class="dropdown-toggle">Head Girl</a></li>
<li><a href="#facilities" >House Captain</a></li>
<li><a href="#description">Asst. House Captain</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane" id="location">
<div class="row">
<fieldset id="group1">
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioA4" name="group1" type="radio" />
<label for="radioA4">Demo text</label>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioA1" name="group1" type="radio"/>
<label for="radioA1">S.Prasanna Venkatesh</label>
</div>
</div>
</div>
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioA2" name="group1" type="radio"/>
<label for="radioA2">S.Prasanna Venkatesh</label>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioA3" name="group1" type="radio"/>
<label for="radioA3">S.Prasanna Venkatesh</label>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="tab-pane" id="type">
<div class="row">
<fieldset id="group2">
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioB4" name="group2" type="radio"/>
<label for="radioB4" onmouseover='changeImage("http://placehold.it/120x60");' onmouseout="changeImage('http://placehold.it/110x110')">Demo text2</label>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioB1" name="group2" type="radio"/>
<label for="radioB1">S.Prasanna Venkatesh</label>
</div>
</div>
</div>
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioB2" name="group2" type="radio"/>
<label for="radioB2">S.Prasanna Venkatesh</label>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioB3" name="group2" type="radio"/>
<label for="radioB3">S.Prasanna Venkatesh</label>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="tab-pane" id="facilities">
<div class="row">
<fieldset id="group3">
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioC4" name="group3" type="radio"/>
<label for="radioC4" onmouseover='changeImage("http://placehold.it/120x60");' onmouseout="changeImage('http://placehold.it/110x110')">Demo text</label>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioC1" name="group3" type="radio"/>
<label for="radioC1">S.Prasanna Venkatesh</label>
</div>
</div>
</div>
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioC2" name="group3" type="radio"/>
<label for="radioC2">S.Prasanna Venkatesh</label>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioC3" name="group3" type="radio"/>
<label for="radioC3">S.Prasanna Venkatesh</label>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="tab-pane" id="description">
<div class="row">
<fieldset id="group4">
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioD4" name="group4" type="radio"/>
<label for="radioD4" onmouseover='changeImage("http://placehold.it/120x60");' onmouseout="changeImage('http://placehold.it/110x110')">Demo text</label>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioD1" name="group4" type="radio"/>
<label for="radioD1">S.Prasanna Venkatesh</label>
</div>
</div>
</div>
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioD2" name="group4" type="radio"/>
<label for="radioD2">S.Prasanna Venkatesh</label>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioD3" name="group4" type="radio"/>
<label for="radioD3">S.Prasanna Venkatesh</label>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div class="wizard-footer">
<div class="pull-right">
<input id="next" type='button' class='btn btn-next btn-fill btn-primary btn-wd' name='next' value='Next' />
<input type='button' class='btn btn-finish btn-fill btn-primary btn-wd' name='finish' value='Finish' />
</div>
<div class="pull-left">
<input type='button' class='btn btn-previous btn-fill btn-default btn-wd' name='previous' value='Previous' />
</div>
<div class="clearfix"></div>
</div>
</form>请帮忙
解决方案
我想你正在寻找这个。如果我错了，请告诉我。
只需为每个添加一个 id<a>并使用下面的函数添加属性。
编辑以适合每个电台和标题：
$('input:radio').click(evt => $("#tab"+evt.target.name).attr("data-toggle", "tab"));<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form action="" method="">
<!-- You can switch " data-color="rose" " with one of the next bright colors: "blue", "green", "orange", "purple" -->
<div class="wizard-header">
<h3 class="wizard-title">
List Your Place
</h3>
<h5>This information will let us know more about your place.</h5>
</div>
<div class="wizard-navigation" id="tabs">
<ul>
<li><a id="tabgroup1" href="#location">Head Boy</a></li>
<li><a id="tabgroup2" href="#type" class="dropdown-toggle">Head Girl</a></li>
<li><a id="tabgroup3" href="#facilities">House Captain</a></li>
<li><a id="tabgroup4" href="#description">Asst. House Captain</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane" id="location">
<div class="row">
<fieldset id="group1">
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioA4" name="group1" type="radio" />
<label for="radioA4">Demo text</label>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioA1" name="group1" type="radio" />
<label for="radioA1">S.Prasanna Venkatesh</label>
</div>
</div>
</div>
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioA2" name="group1" type="radio" />
<label for="radioA2">S.Prasanna Venkatesh</label>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioA3" name="group1" type="radio" />
<label for="radioA3">S.Prasanna Venkatesh</label>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="tab-pane" id="type">
<div class="row">
<fieldset id="group2">
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioB4" name="group2" type="radio" />
<label for="radioB4" onmouseover='changeImage("http://placehold.it/120x60");' onmouseout="changeImage('http://placehold.it/110x110')">Demo text2</label>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioB1" name="group2" type="radio" />
<label for="radioB1">S.Prasanna Venkatesh</label>
</div>
</div>
</div>
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioB2" name="group2" type="radio" />
<label for="radioB2">S.Prasanna Venkatesh</label>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioB3" name="group2" type="radio" />
<label for="radioB3">S.Prasanna Venkatesh</label>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="tab-pane" id="facilities">
<div class="row">
<fieldset id="group3">
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioC4" name="group3" type="radio" />
<label for="radioC4" onmouseover='changeImage("http://placehold.it/120x60");' onmouseout="changeImage('http://placehold.it/110x110')">Demo text</label>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioC1" name="group3" type="radio" />
<label for="radioC1">S.Prasanna Venkatesh</label>
</div>
</div>
</div>
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioC2" name="group3" type="radio" />
<label for="radioC2">S.Prasanna Venkatesh</label>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioC3" name="group3" type="radio" />
<label for="radioC3">S.Prasanna Venkatesh</label>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="tab-pane" id="description">
<div class="row">
<fieldset id="group4">
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioD4" name="group4" type="radio" />
<label for="radioD4" onmouseover='changeImage("http://placehold.it/120x60");' onmouseout="changeImage('http://placehold.it/110x110')">Demo text</label>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioD1" name="group4" type="radio" />
<label for="radioD1">S.Prasanna Venkatesh</label>
</div>
</div>
</div>
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioD2" name="group4" type="radio" />
<label for="radioD2">S.Prasanna Venkatesh</label>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group label-floating">
<div class="inputGroup">
<input id="radioD3" name="group4" type="radio" />
<label for="radioD3">S.Prasanna Venkatesh</label>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div class="wizard-footer">
<div class="pull-right">
<input id="next" type='button' class='btn btn-next btn-fill btn-primary btn-wd' name='next' value='Next' />
<input type='button' class='btn btn-finish btn-fill btn-primary btn-wd' name='finish' value='Finish' />
</div>
<div class="pull-left">
<input type='button' class='btn btn-previous btn-fill btn-default btn-wd' name='previous' value='Previous' />
</div>
<div class="clearfix"></div>
</div>
</form>推荐阅读
- android - gradle 文件中的“com.android.support:appcompat-v7.27.1.1”问题
- oracle - PL/SQL 触发器不显示？
- sql-server - 无法连接到 SQL Server Management Studio 2017 中的本地数据库
- angular - 错误 TS2315：类型“ElementRef”不是通用的
- jquery - 从 jquery 的函数生成 pdf 并希望将其保存在我的服务器上
- domain-driven-design - DDD 修改每个事务的一个聚合，两个聚合中的不变量
- php - 如何使用在 docker composer 中设置的环境变量
- javascript - lodash合并一个对象
- css - @media 查询在 iPhone 上不起作用
- openlayers - 使用画布图案设计几何体的笔触