zoukankan      html  css  js  c++  java
  • JQ上下滑动切换

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <link href="css/style.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery.js"></script>
    </head>
    <body>
    <style type="text/css">
    *{margin:0;padding:0;list-style-type:none;}
    /* acttabbox */
    .acttabbox{500px;height:300px;overflow:hidden;padding:4px;border:solid 1px #690501;margin:40px auto;}
    .tabcon{float:left;300px;height:300px;overflow:hidden;margin-right:-2px;} 
    .tabcon li{300px;height:300px;}
    .tabcon li img{300px;height:300px;float:left}
    .tabnav{float:right;200px;}
    .tabnav li{float:left;position:relative;margin:-1px 0 0 0;height:99px;border:1px solid #000;overflow:hidden;288px;height:99px;}
    .tabnav .cur{border:1px solid #ccc;z-index:9;}
    </style>
    <div class="acttabbox">
    	<ul class="tabnav">
    		<li class="cur">111111111</li>
    		<li>22222222</li>	
    		<li>333333333</li>
    	</ul> 
    	<ul class="tabcon">
    		<li> aaaaaaaaaaaa</li>
    		<li>bbbbbbbbb</li>
    		<li>ccccccccccccccc</li>
    	</ul>
    
    </div>
    
    
    <script type="text/javascript">
    $(function(){     
    	
    	function showTab(index){			
    		$('.tabnav li').eq(index).addClass('cur').siblings().removeClass('cur');				 
    		$('.tabcon li').eq(index).stop(true,true).slideDown('slow').siblings().slideUp('slow');
    	}
    	
    	$('.tabnav li').click(function(){
    		var index=$(this).index(); 
    		showTab(index);	 
    	});
    	
    	
    });
    </script>
    
    </body>
    </html>
    

     竖版

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <script type="text/javascript" src="js/jquery.js"></script>
    </head>
    <body>
    <style type="text/css">
    *{margin:0;padding:0;list-style-type:none;word-wrap:break-word;word-break:break-all }
    /* acttabbox */
    .acttabbox{200px;height:300px;overflow:hidden;border:solid 1px #000;margin:40px auto;}
    .tabnav{float:left;200px;}
    .tabnav li{float:left;position:relative;margin:1px;height:20px;border:1px solid #000;overflow:hidden;100%;height:20px;}
    .tabnav .cur{border:1px solid #ccc;}
    .tabcon{float:left;200px;} 
    .tabcon li{200px;height:240px;}
    
    </style>
    <div class="acttabbox">
    	<ul class="tabnav">
    		<li class="cur">111111111</li>
    		<li>22222222</li>	
    		<li>333333333</li>
    	</ul> 
    	<ul class="tabcon">
    		<li> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
    		<li>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</li>
    		<li>ccccccccccccccccccccccccccccccccccccccccccc</li>
    	</ul>
    </div>
    
    <script type="text/javascript">
    $(function(){     
    	
    	function showTab(index){			
    		$('.tabnav li').eq(index).addClass('cur').siblings().removeClass('cur');				 
    		$('.tabcon li').eq(index).stop(true,true).slideDown('slow').siblings().slideUp('slow');
    	}
    	
    	$('.tabnav li').click(function(){
    		var index=$(this).index(); 
    		showTab(index);	 
    	});
    	
    	
    });
    </script>
    
    </body>
    </html>
    
  • 相关阅读:
    bzoj 1176 cdq分治套树状数组
    Codeforces 669E cdq分治
    Codeforces 1101D 点分治
    Codeforces 1100E 拓扑排序
    Codeforces 1188D Make Equal DP
    Codeforces 1188A 构造
    Codeforces 1188B 式子转化
    Codeforces 1188C DP 鸽巢原理
    Codeforces 1179D 树形DP 斜率优化
    git commit -m "XX"报错 pre -commit hook failed (add --no-verify to bypass)问题
  • 原文地址:https://www.cnblogs.com/fenle/p/4448595.html
Copyright © 2011-2022 走看看