我在网站上有三个标志图像作为语言选择器。在当前选择的语言中,我有一个灰色边框。
HTML:
<div class="widget widget_lang_widget" id="lang_widget-2">
<ul>
<li class="active" id="lang-Italian">
<a href="#">
<img alt="Italian" src="http://s14.postimg.org/44zy6qvz1/Italian.gif">
</a>
</li>
<li id="lang-English">
<a href="#">
<img alt="English" src="http://s14.postimg.org/mw1vgwqjh/English.gif">
</a>
</li>
<li id="lang-Spanish">
<a href="#">
<img alt="Spanish" src="http://s14.postimg.org/4vsociycd/Spanish.gif">
</a>
</li>
</ul>
</div>
CSS:
#lang_widget-2 {list-style: none !important ;}
#lang_widget-2 ul {list-style: none !important ; margin-left:0 !important; margin-right:10px;}
#lang_widget-2 ul li {padding:8px 0px;}
#lang_widget-2 ul li { float: left; margin:0;}
#lang_widget-2 ul li a{ text-indent:-9999px; margin:0; padding: 13px 5px 0 5px!important;}
#lang_widget-2 ul li a,#lang_widget-2 ul li a img{display: block;}
#lang_widget-2 ul li.active a img{border:solid grey; border-width:2px;}
当用户切换语言更新时,此边框将从之前选择的语言中删除并应用于新选择的语言。
为了做到这一点,使用jquery:
jQuery(document).ready(function($) {
$('#lang_widget-2 ul li a').click(function() {
$('#lang_widget-2 ul li.active').removeClass('active');
$(this).closest('li').addClass('active');
});
});
代码正常工作,但执行指令$(this).closest('li').addClass('active');
后除外
调用的jQuery x.event.dispatch函数和我的javascript的效果都被撤消。
我做错了什么?
有人可以帮帮我吗?