js+jquery tab切换书签制作教程大全

 js+jquery tab切换书签制作教程大全

说明：原生js控制页面需要用的id获取id控制页面元素详见id和class区别，利用jquery强大选择器功能不仅方便获取元素而且可以做到函数复用。推荐使用

在此列一下tab书签页面中常用到的js代码：

方法一：

<script>
$(document).ready(function (){
    $('.tab .tab_menu li').mouseover(
  function(){
   var theid = $('.tab .tab_menu li').index(this);//鼠标移动获取当前li
   show_new_goods(theid);
       }
     );
     function show_new_goods(i){
       $('.tab .tab_menu li').eq(i).addClass('current').siblings('.tab .tab_menu li').removeClass('current'); 
       $('.tab .tab_con').eq(i).show().siblings('.tab .tab_con').hide();  
        }
});
</SCRIPT>

方法二：

<script language="JavaScript" type="text/javascript">          
 var m=1;
 function tab(m)
 {
  var j = 3;//j为总的标签数
  document.getElementById('tab'+m).className='current';
  document.getElementById('tab_con'+m).style.display='block';
  for(i = 1; i <= j; i ++){
   if(i == m){
    continue;
   }
   document.getElementById('tab_con'+i).style.display='none';
   document.getElementById('tab'+i).className=' ';
  }
   
 }
 </script>

方法三：

<script>
$(document).ready(function (){
    $('.tab .tab_menu li').mouseover(
  function(){
  $(this).addClass('current').siblings().removeClass('current'); 
       $('.tab .tab_con').hide().eq($(this).index()).show();  
       }
     );
   
});
</SCRIPT>

方法四：

<script>

$(function(){
  $(".tab .index_tab li").click(function(){
   $(this).addClass("current").siblings().removeClass("current")
   $(this).parents().parents().children(".tab_con").hide().eq($(this).index()).show();
   $(this).parents().children(".tab_more").hide().eq($(this).index()).show();
   })
 })
</SCRIPT>

方法五：

有时候制作菜单，文字都是图片，需要切换不同样子进行书签切换；jquery代码整理如下：

//菜单当前样式添加
    $(".top_menu li").click(function(){
   var m=$('.top_menu li').index(this);  
     
 for(i=0;i<=4; i++){
  var n=i+1; 
  $(".top_menu li").attr('class','');}
  
  $(this).attr('class','current_'+m);
  $('.con .pro_ul').eq(m).show().siblings('.con .pro_ul').hide();
 })

方法六：

带动画tab书签切换： 

说明： 利用parents()和children()方法实现页面中tab书签代码公共： 更多函数参考>>十个非常有用的遍历函数

上一条： JQuery hover(over,out)函数 使用笔记
下一条： 网页制作class和id的区别