没有点击是效果如图1,点击后效果应该如图2
图1
图2
html:
<div id="nav_button"> <div> <button id="nav_button_pre" class="btn btn-default btn-sm" ng-click="get_pre_items()"> << </button> </div> <div ng-repeat="data in data_list" id="nav_buttons"> <span class="btn btn-default btn-sm" ng-click="open_relate_program(data)"> {{ data.title }} </span> </div> <div> <button id="nav_button_next" class="btn btn-default btn-sm" ng-click="get_next_items()"> >> </button> </div> </div>
css:
#nav_buttons{ float: left; } #nav_button_pre{ float: left; } .button_check{ color: #8B4513; } #nav_button>span:focus{ color: #8B4513; }
js:
$(function() { $('#nav_button').hover(function(){ $('span').mousedown(function(){ $('span').removeClass("button_check"); $(this).addClass("button_check"); }) }) })
现在的问题是在chrome中这能正常工作,当是在IE8中就不能正常工作了,表现为当我点击了选这条后颜色没有变化,只有当我再点击其他地方时选择条颜色才变化,何解?
你的事件重复注册了。导致了特定次数就会生效。既然你用了angular,你直接用angular的双向绑定不就ok啦?