jquery制作的tab标签切换选项卡

最新推荐文章于 2014-02-10 09:20:50 发布
最新推荐文章于 2014-02-10 09:20:50 发布
阅读量1.1k 收藏
点赞数
分类专栏： jquery 文章标签： jquery jQuery JQUERY Jquery JQuery jquery tab
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/touchandy/article/details/8510009
版权

 在线演示地址： 评论1楼

复制代码无需任何修改可以看到效果

 1 base.css文件

*{color:#fff;margin:0px;padding:0px;font-family:Georgia, "Times New Roman", Times, serif;font-size:16px;}
body{background-image:url(../images/bg.jpg);}
a{text-decoration:none;outline: none;}
a:active {star:expression(this.onFocus=this.blur());}
ul,li{list-style:none;}
.clear {clear:both;}

#nav{height:40px;margin-bottom:-2px;}
#nav li{text-align:center;float:left;margin-right:3px;border-radius:8px 8px 0px 0px;}
#nav li.tabFocus{font-weight:bold;z-index:100;position:relative;background-color:black;}
#nav li a{width:100px;display:block;padding:8px;padding-top:12px;}

#content{width:1200px;height:auto;margin-left:auto;margin-right:auto;background-color:black;border-radius:5px;}
#content .aside_left{width:870px;height:auto;float:left;overflow:hidden;margin-left:20px;display:inline;}

2 index.html文件 

<!DOCTYPE html>
 <html lang="zh-CN">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta name="baidu-tc-verification" content="55df68f711d2c61f5404932286e27233" />
<title>学习笔记</title>
<link href="stylesheet/base.css" type="text/css" rel="stylesheet"/>
<script src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="nav">
     <li class="tabFocus " style="margin-left:50px;" ><a href="#">Home</a></li>
    <li ><a href="#">html5</a></li>
    <li ><a href="#">css3</a></li>
    <li ><a href="#">jquery</a></li>
    <li ><a href="#">ExtJS</a></li>
    <li ><a href="#">IE6兼容</a></li>
    <li ><a href="#">时间轴</a></li>
</div>

<div id="content">
    <ul class="aside_left">
    	<li class="conFocus">  1 </li>
        <li>  2 </li>
        <li>  3 </li>
        <li>  4 </li>     
        <li>  5 </li>
        <li>  6 </li>
        <li>  7 </li>
 </ul> </div></body></html>








3. js文件写在index.htmlde head中为了查看的方便


 <script>
	$(function(){
		$("#content .aside_left>li").hide();
		$("#content .aside_left>li.conFocus").show();
		$("#nav li").each(function(index){
			$(this).click(function(){
				$("#nav li.tabFocus").removeClass("tabFocus");
				$(this).addClass("tabFocus");
				$(".aside_left>li:eq("+index+")").show().siblings().hide();
				});
		});
	});
 </script>
  代码很简单，基本没有需要讲的代码。对你有用的话就拿去用吧。









                

        

        

    




    

      

        

            

              
                
                  touchandy
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  1
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
jQuery点击切换Tab标签选项卡代码

				
			

			

				

					06-24
				

			

		

		

			
				
jQuery点击切换Tab标签选项卡代码，点击标签滑动切换效果，固定的单排列表切换代码。

			
		

	



                

              
                



	

		

			

				
					
使用jQuery实现简单的tab栏标签切换

					
热门推荐

				
			

			

				

					zhake_的博客
				

				

					05-02
					
					1万+
					
				

			

		

		

			
				
强调下没有CSS样式代码

1.页面结构代码
	 
		
		 
			导航菜单 
			TAB标签 
		 
		 
			 
				
				jquery css多级下拉菜单 
				多级菜单，理论上支持无限多的层级，文件结构非常简单的，具体的请看下面的内容 
			 
			
			 
				各种tab标签选项卡 
				tab标签页面,ajax载入 
				
				 ta

			
		

	



                


  
              

                


	

		

			

				
					
jQuery简单实现tab选项卡切换效果

				
			

			

				

					10-22
				

			

		

		

			
				
主要介绍使用jQuery封装了一个tab选项卡切换的插件，需要的朋友可以参考下。

			
		

	





	

		

			

				
					
jQuery标签页Tab选项卡切换

				
			

			

				

					06-24
				

			

		

		

			
				
jQuery标签页Tab选项卡切换是一款视觉效果较好常用的选项卡切换插件。

			
		

	



		

			
		



	

		

			

				
					
jquery弹性效果切换Tab选项卡代码

				
			

			

				

					01-23
				

			

		

		

			
				
jquery弹性效果切换Tab选项卡代码

			
		

	





	

		

			

				
					
jQuery点击切换Tab标签选项卡特效代码

				
			

			

				

					03-20
				

			

		

		

			
				
jQuery点击切换Tab标签选项卡代码，点击标签滑动切换效果，固定的单排列表切换代码。

			
		

	





	

		

			

				
					
jquery获取div距离窗口和父级dv的距离

				
			

			

				

					touchandy
				

				

					10-10
					
					8220
					
				

			

		

		

			
				
jquery中jquery.offset().top / left用于获取div距离窗口的距离，jquery.position().top / left 用于获取距离父级div的距离（必须是绝对定位的div）。
 （1）先介绍jquery.offset().top / left
            css：
                     *{ margin: 0px; pad

			
		

	





	

		

			

				
					
基于mvc模式的jquery ajax异步请求

				
			

			

				

					touchandy
				

				

					12-26
					
					1585
					
				

			

		

		

			
				
在这边介绍在,net开发基于mvc三层架构模式的jquery ajax异步请求，这边的重点放在ajax请求上而mvc模式只是应用环境作为介绍。
    在jquery ajax中有好几种异步请求的方式有get 有post 还有发起带所有参数的Ajax请求，
     在这边我介绍其中的一种$.ajax(options)方式，相信其他的方式在看完本文之后你也可以会使用。
         $.

			
		

	





	

		

			

				
					
js删除元素

				
			

			

				

					touchandy
				

				

					10-11
					
					1364
					
				

			

		

		

			
				
删除元素
	
	
		*{ margin:0px; padding: 0px;}
		div{ width: 200px; height: 100px; background: red;}
	


this is first graph
this is second graph
点击删除段落p
this is third graph

	this is first graph
	this is s

			
		

	





	

		

			

				
					
jquey和js插入节点

				
			

			

				

					touchandy
				

				

					10-11
					
					885
					
				

			

		

		

			
				
代码如下：




	
	插入元素
	
	
	*{marign: 0px; padding: 0px;}
	
	.a, .b, .c{ width: 960px; min-height: 100px; background: grey; margin: 0px auto;}
	
	.b{ background: orange;}
	
	h2{ background: green; margin

			
		

	





	

		

			

				
					
jquery和js创建节点

				
			

			

				

					touchandy
				

				

					10-11
					
					823
					
				

			

		

		

			
				
代码及解释：


		$(function(){
			//创建元素，文本和属性
			var $_h1 = $("");  //创建h1对象
			var $_h1 = $("this is h1")  //创建文本也就是在创建的元素里面增加内容
			var $_h1 = $("this is h1");  //为元素创建两个属性
			$("body").append($_h1);	 /

			
		

	





	

		

			

				
					
图片轮播下获取鼠标点了哪个按钮

				
			

			

				

					touchandy
				

				

					02-10
					
					645
					
				

			

		

		

			
				
1
 2
 3
 4
 5





js:
  var aA = $(".num_btn a");
var iNow = 0;
aA.live("click",function(){
    iNow = aA.index($(this));
//如果此时鼠标点击第三个a则此时的iNow = 2；

});

			
		

	





	

		

			

				
					
jquery和js操作属性

				
			

			

				

					touchandy
				

				

					10-16
					
					636
					
				

			

		

		

			
				
1234


	$(function(){
		/*-----------jquery使用attr()方法设置属性-----------------*/
		$("p").attr("title","this is title");
		
		//jquery的attr()方法可以批量设置属性
		$("img").attr({"src":"images/banner.jpg", 

			
		

	





	

		

			

				
					
关于__Federico Milano 的电力系统分析工具箱.zip

				
			

			

				

					04-26
				

			

		

		

			
				
1.版本：matlab2014/2019a/2021a

 2.附赠案例数据可直接运行matlab程序。 

3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 

4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 



			
		

	





	

		

			

				
					
mlab-upenn 研究小组的心脏模型模拟.zip

				
			

			

				

					04-26
				

			

		

		

			
				
1.版本：matlab2014/2019a/2021a

 2.附赠案例数据可直接运行matlab程序。 

3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 

4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 



			
		

	





	

		

			

				
					
混合图像创建大师matlab代码.zip

					
最新发布

				
			

			

				

					04-26
				

			

		

		

			
				
1.版本：matlab2014/2019a/2021a

 2.附赠案例数据可直接运行matlab程序。 

3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 

4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 



			
		

	





	

		

			

				
					
jquery实现tab选项卡切换

				
			

			

				

					05-17
				

			

		

		

			
				
可以用以下代码实现基本的Tab选项卡切换：

HTML代码：

```
<div class="tab">
  <ul class="tab-menu">
    <li class="active"><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
  </ul>
  <div class="tab-content">
    <div id="tab-1" class="tab-panel active">This is tab 1 content.</div>
    <div id="tab-2" class="tab-panel">This is tab 2 content.</div>
    <div id="tab-3" class="tab-panel">This is tab 3 content.</div>
  </div>
</div>
```

CSS代码：

```
.tab-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.tab-menu li {
  margin-right: 10px;
}

.tab-menu li a {
  display: block;
  padding: 10px;
  background-color: #eee;
  color: #333;
  text-decoration: none;
}

.tab-menu li.active a {
  background-color: #333;
  color: #fff;
}

.tab-panel {
  display: none;
  padding: 10px;
}

.tab-panel.active {
  display: block;
}
```

jQuery代码：

```
$(document).ready(function() {
  // 初始状态下，显示第一个选项卡
  $('.tab-menu li:first').addClass('active');
  $('.tab-panel:first').addClass('active');

  // 点击选项卡时，切换显示内容
  $('.tab-menu li').click(function() {
    var tab_id = $(this).find('a').attr('href');

    $('.tab-menu li').removeClass('active');
    $('.tab-panel').removeClass('active');

    $(this).addClass('active');
    $(tab_id).addClass('active');
  });
});
```

当用户点击选项卡时，通过jQuery代码来切换显示内容。首先，我们在页面加载完成后，将第一个选项卡及其内容设为初始状态下的激活状态。然后，我们通过jQuery的click()方法来监控选项卡的点击事件。当用户点击某个选项卡时，我们将该选项卡及其对应的内容设为激活状态，同时将其他选项卡及其对应的内容设为非激活状态。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值