关于选项卡，JS鼠标移入移出事件怎么改成点击事件？
<script>
$(".dt_tab li").mouseenter(function () {
if(! $(this).hasClass(".showed")){
$(".showed").removeClass("showed");
$(this).addClass("showed");
$(".dt_tab>div").eq($(this).index()).addClass("showed");
}
})
</script>
这是选项卡的JS代码，请问怎么把移入移出切换改成点击切换？而且这段不能放在<head>里，放了不生效，放在选项卡后面才生效，比较影响代码的浏览性，怎么改能达到移入移出切换变成点击切换和放到<head>里也生效？
mouseenter 改成 click
放在 head 不生效是因为选项卡的元素还没有生成，所以这个事件无法绑定到目标对象上。
可以改成下面的代码，在网页加载完毕后再绑定事件，这样就可以放在 <head> 中：
$(document).ready(function(){
$(".dt_tab li").mouseenter(function () {
if(! $(this).hasClass(".showed")){
$(".showed").removeClass("showed");
$(this).addClass("showed");
$(".dt_tab>div").eq($(this).index()).addClass("showed");
}
})
})追问
放在 head 不生效是因为选项卡的元素还没有生成，所以这个事件无法绑定到目标对象上。
可以改成下面的代码，在网页加载完毕后再绑定事件，这样就可以放在 <head> 中：
$(document).ready(function(){
$(".dt_tab li").mouseenter(function () {
if(! $(this).hasClass(".showed")){
$(".showed").removeClass("showed");
$(this).addClass("showed");
$(".dt_tab>div").eq($(this).index()).addClass("showed");
}
})
})追问
非常感谢大佬，弄好了之后又发现一个问题，那就是我点击第二张图片，他会刷新显示第二个栏目的图片，点击第三张显示第三个栏目，而且上面绿色区域不会跟着显示，我只有4个栏目，点击第5张就会显示空白了，这个js要怎么改能取消点击下面内容图片跳转栏目？
这个需要实际调试才能解答你，就现有的代码无法凭空解答。
追问不用了，我这边查阅其他方法，已经调试好了，非常感谢大佬。
温馨提示：答案为网友推荐，仅供参考
相似回答