如果你有一个前端女友

2019独角兽企业重金招聘Python工程师标准>>>

$(document).ready(function(){
 //这里这么写，意思是要找到样式为left_box下的li标签，为它创建点击事件，因为该样式下li标签很多所以
 $(".left_box li").click(function(){
  //在这我获取了到底点的是哪个li
  var num = $(this).index();
  //这里是获取li总共的数量，方便在后面做循环处理
  var nums = $(".left_box li").length;
  //for循环，此处，你需要注意0的索引是第一个li，1的索引是第二个li，最后一个索引是nums-1
  for(var i=0;i<nums;i++){
   //判断，用户点击的那个li是否与i相等，如果相等，则循环的时候改变他的背景，并显示相应的内容
   //否则，用户没有点击这个li，为他们设置默认的页签样式，并且影藏所有不需要显示的内容
   if(i == num){
    //.children()意思是找到他所有的孩子
    //.eq(num)意思是到底要哪个孩子
    //.css("background","url(../images/map_tab.png)")给这个孩子换件衣服
    $(".left_box").children().eq(num).css("background","url(../images/map_tab.png)");
    //这里num为什么要加1呢，因为这里你是需要自动拼凑出ID的值，在你HTML标签里面你的原来的ID是yq_content1和yq_content2
    //如果不加1那拼凑出来的结果就是yq_content0和yq_content1了，所以要加1哦
    $("#yq_content"+(num+1)).css("display","block");
   }else{
    $(".left_box").children().eq(i).css("background","#666");
    $("#yq_content"+(i+1)).css("display","none");
   }
  }
 });
});

转载于:https://my.oschina.net/leftheart/blog/658033