tab切换优化

 
   前两天写了一个很简单的静态页面，用到tab的切换，简单的说一下吧。 
  

 
   首先，我要做的页面是这个样子的。 
  

 
   好了，看到这张图想来已经很明白了，就是tab的切换来展示内容。 
  

 
   进入主题，这个要怎么做呢。 
  

 
把上面的大赛首页、介绍等写成div（其他元素当然也是可以的），点击大赛首页div，大赛首页的内容显示，其他部分的内容隐藏。点击大赛介绍div，介绍部分内容显示，其他内容隐藏。其他同理。 
  

 
   翻译成代码就是这样的： 
  

var gameIndex = $('#gameIndex');//这里有几个tab就要获取几次并定义变量来存储
gameIndex.click(function(){
     //所有的内容部分隐藏
     //gameIndex的内容部分显示
});

var gameIntroduce = $('#gameIntroduce');
gameIntroduce.click(function(){
     //所有的内容部分隐藏
     //gameIntroduce的内容部分显示
});

 
   这大概就是我们最开始接触tab切换的时候写出来的代码。 
  

 
   好了，我只写了两个tab，你大概已经感受到了，这个代码很烦，有多少个tab，这样的代码就要写多少，重点是他们几乎长的一样。 
  

 
那就说一个高级一点的吧。 
  

 
   先说一下a标签跳转到页面的某一个部分怎么做。 
  

 
   <a href = '#gameIndex' />大赛首页</a> 
  

 
   把a标签的href写成这样的话，点击a标签，页面会直接跳到id为gameIndex的元素，元素显示在页面的最顶部。但是此时你只想显示大赛首页的内容，那就给a标签加一个自定义的属性。这样可以做到a标签和点击它要显示的那个内容一一对应。 
  

//gameIndexCon为大赛首页内容框的id
<a href = '#gameIndex'  data-url=’gameIndexCon‘   />大赛首页</a>

//选出所有的a标签
var aList = $('#head').find('a');
aList.click(function(){
   //var shouldShowContent = $(this).attr('data-url');
   //得到你点的是哪个a标签，就可以知道你要显示哪个内容框
   // ok，所有的内容部分隐藏
   //shouldShowContent 显示  
});

 
   刚才说到了一个东西，就是点击a标签的时候他会跳转到页面的最顶部，直接展示正文部分，如图 
  

 
   这个样子，但是其实我们想要的是，如图 
  

 
   这个样子，这个时候，只需要把a标签的默认事件去掉就好了。 
  

return false；

aList.click(function(){
    //var shouldShowContent = $(this).attr('data-url');
    //得到你点的是哪个a标签，就可以知道你要显示哪个内容框
    // ok，所有的内容部分隐藏
    //shouldShowContent 显示  

   return false；
});

 
   不用多说。这样子写，比第一种代码量少很多，事件绑定也少很多。 
  

 
   再多说一丢丢，这里a标签点击，鼠标上浮往往要加样式，如图 
  

 
   点击，当前的变绿，其他的颜色都去掉，就是这么个效果。建议不要在js里面写样式，可以把样式写在css里面，js里面直接加类名或者去掉类名就好了。 
  

 
   好了，写到这里你又要说，那a标签有什么用？我也在想，好像真的没有什么用。如果是页面有很多内容点击a标签让他跳转到某一个部分确实很实用，但是你这个只显示一个内容，就是一个tab的切换，我用其他的元素比如div也可以做。所以我说一下为什么要用a标签呢，其实页面的语义化还是很重要的，写成a标签一看就是跳转，更容易被你和看你代码的人理解，以及搜素引擎的解析。 
  

猜你喜欢