首页 > jquery网页培训班 > js+jquery tab切换书签制作教程大全

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书签代码公共: 更多函数参考>>十个非常有用的遍历函数

 

 

原文地址:http://www.35ui.cn/post/20110810685.html

标签js网页制作javascript培训班jQuery教程做网页常用代码jquery

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

  • 作品
  • 素材
  • ued
  • 资源
  • 前端工程师
  • Asp网页培训班
  • jquery培训班
  • 北京网站制作
  • logo设计培训班
  • 做网站常用代码