我有一个要求,当我单击任何选项卡时,它都像手风琴菜单选项卡一样工作,但是这里的一个问题是,当我单击任何其他选项卡时,应该关闭打开的选项卡,而只有与选项卡相关的当前内容才应显示为html。我提到的只是示例,实际上id和div是动态生成的。我还要插入图片以便更好地理解。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"/>
<script>
$(document).ready(function(){
// Get all the links.
var link = $("#vy_accordion a");
// On clicking of the links do something.
link.on('click', function(e) {
e.preventDefault();
var a = $(this).attr("href");
$(a).slideToggle('fast');
$(".control-group").css({ 'display' : 'block', 'margin-bottom' : '0' });
});
});
</script>
#vy_accordion {
margin-top: 10px;
border: thin solid #cecece;
border-top: none;
border-bottom: none;
}
#vy_accordion div {
background: white;
/*height: inherit;
line-height: inherit;*/
display: none;
border-bottom: thin solid #cecece;
padding-left: 15px;
min-height: 70px;
}
a.divlink {
display: block;
/* width: 483px; */
background: #f4f4f4;
background-image: -webkit-linear-gradient(white, #ededed);
background-image: -moz-linear-gradient(white, #ededed);
background-image: -o-linear-gradient(white, #ededed);
background-image: -ms-linear-gradient(white, #ededed);
background-image: linear-gradient(white, #ededed);
color: #959696;
padding-left: 15px;
height: 40px;
line-height: 40px;
text-decoration: none;
border-bottom: thin solid #cecece;
border-top: thin solid #cecece;
font-family: Arial;
font-size: 13px;
font-weight: bold;
text-shadow: 0px 1px 1px white;
}
<a class="divlink" href="#Menu-hover-color">Menu-hover-color</a>
<div id="Menu-hover-color" style="display: none;">
<div class="control-group">
<label class="control-label" for="_156_Menu-hover-color"> Menu-hover-color </label> <input class="field" id="_156_Menu-hover-color" name="" type="text" value="#B3E5FC">
</div>
</div>
<a class="divlink" href="#Menu-hover-color">Menu-item-color</a>
<div id="Menu-item-color" style="display: none;">
<div class="control-group">
<label class="control-label" for="_156_Menu-item-color"> Menu-hover-color </label> <input class="field" id="_156_Menu-item-color" name="" type="text" value="#B3E5FC">
</div>
</div>
在显示被单击/选定的选项卡之前linkTab
,根据此类选择器调用hide()
,将类似的类添加到您的选项卡(例如),如下所示:
HTML:
<a class="divlink" href="#Menu-hover-color">Menu-hover-color</a>
<div class="linkTab" id="Menu-hover-color" style="display: none;">
...
JS:
var link = $("#vy_accordion a");
// On clicking of the links do something.
link.on('click', function(e) {
e.preventDefault();
var a = $(this).attr("href");
// this line will hide all open tab based on class selector
$('.linkTab').hide();
$(a).slideToggle('fast');
$(".control-group").css({ 'display' : 'block', 'margin-bottom' : '0' });
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句