Thay đổi class active javascript bằng cách viết hàm (P2)
Bắt ký tự "#"
<div class="td-container-content clear-fix">
<div id="td-col-left">
<ul class="td-panel-menu">
<li class="td-panel-welcome">
<a href="#" class="td-panel-menu-active" data-panel="td-panel-welcome">
<span class="td-sp-nav-icon td-ico-header"></span>
Header
<span class="td-arrow"></span>
</a>
</li>
<li class="td-panel-footer">
<a href="#" data-panel="td-panel-footer">
<span class="td-sp-nav-icon td-ico-footer"></span>
Footer
<span class="td-arrow"></span>
</a>
</li>
</ul>
</div>
<div id="td-col-right" class="td-panel-conentent">
<div id="td-panel-header" class="td-panel td-panel-active">
<div class="td-box-header">
<div class="td-box-title">Header Style</div>
<a href="#" class="td-box-toogle">
<span class="td-box-open-close-icon"></span>
</a>
</div>
<div class="td-box-content-wrap clear-fix">
<div class="td-box-description">
<span class="td-box-title">Header Style</span>
<p>Lựa chọn style header</p>
</div>
<div class="td-box-control-full">
<div id="wrap_td_uid_3_5c7413f2e4754">
<div class="td-small-wrapper-o td-small-wrapper-saperator">
<div class="td-visual-selector-o" id="td_uid_4_5c7413f2e4756">
<a href="#">
<img src="http://localhost/wordpressvi/wp-content/themes/newspapervi/images/panel/menu/icon-menu-1.png" class="td-visual-selector-o-img">
</a>
<div class="td_vso_caption">
Style 1
</div>
</div>
</div>
<div class="td-small-wrapper-o td-small-wrapper-saperator">
<div class="td-visual-selector-o" id="td_uid_5_5c7413f2e475a">
<a href="#">
<img src="http://localhost/wordpressvi/wp-content/themes/newspapervi/images/panel/menu/icon-menu-2.png" class="td-visual-selector-o-img td-visual-selector-active">
</a>
<div class="td_vso_caption">
Style 2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="td-panel-footer" class="td-panel">
</div>
</div>
</div>
function panel_navigation() {
jQuery('.td-panel-menu a').click(function(event) {
if(typeof jQuery(this).data('panel')=='undefined'){
return;
};
event.preventDefault();
// Change panel active
jQuery('.td-panel-active').removeClass('td-panel-active');
jQuery('#'+ jQuery(this).data('panel')).addClass('td-panel-active');
});
};
jQuery().ready(function() {
panel_navigation();
});
PreviousThay đổi class active javascript bằng cách viết hàm (P1)NextjQuery Mockjax Plugin (chưa học cách sử dụng)
Last updated