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();
});

Last updated