[英]how to remove and create new ul li tag in html using javascript
[英]How to set a class active in ul li div in html using Javascript?
我有一個導航菜單項,其中有ul個元素,當單擊導航欄時,我想更改li類的顏色等。 我為此寫下了一些JavaScript,但它只打開導航菜單項,但是當我單擊子項時,頂部菜單項關閉,並且li項無法設置為活動狀態。 這是我的Java語言:
<script type="text/javascript">
$(document).ready(function () {
$('#moduleNav .locked').tooltip();
$('#moduleNav').on('hide', function () {
$(this).find('.accordion-group').each(function () {
$(this).removeClass('open');
});
});
$('#moduleNav').on('show', function (e) {
$(e.target).siblings('.accordion-group').addClass('open');
});
$('#moduleNav').on('show', function (e) {
$(e.target).siblings('.accordion-inner').addClass('li.active');
});
});
</script>
這是這個的html:
<div class="accordion-group ">
<a class="accordion-toggle " data-toggle="collapse" data-target="#submenuitem" data-parent="#moduleNav" href="javascript:void(0);">Open menu item</a>
</div>
<div id="submenuitem" class="accordion-body collapse ">
<div class="accordion-inner">
<ul>
<li class="">
<a href="#">sub item 1</a>
</li>
<li class="">
<a href="#">sub item 2</a>
</li>
</ul>
</div>
這是CSS:
#moduleNav .accordion-group .accordion-inner ul li {
border-bottom: 1px solid #3ab553;
padding: 10px 6px;
position: relative;
}
#moduleNav .accordion-group .accordion-inner ul li.active {
background: #d6efd3;
}
#moduleNav .accordion-group .accordion-inner ul li.active:after {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-left-color: #d6efd3;
border-width: 10px;
margin-top: -10px;
}
例
CSS:
.active{
background:#00c189l;
}
.inactive{
background:gray;
}
HTML:div id =“ example” class =“ inactive” onclick =“ Change();”>示例/ div
JAVASCRIPT:使用Jquery:
function Change(){
$('#example').removeClass("inactive");
$('#example').addClass("active");
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.