网页样式（css+js)tab自动切换的minisite

最新推荐文章于 2023-12-21 22:05:11 发布
最新推荐文章于 2023-12-21 22:05:11 发布
阅读量672 收藏
点赞数
分类专栏： 网页制作-css+html+js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/newmarui/article/details/47834285
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
<title>tab标签自动切换</title>  
<style type="text/css">

#box{width:500px;font-size:12px} 
#box ul{margin:0;padding:0;list-style:none} 

#box #tab{height:25px;padding-left:10px;border-bottom:1px solid #AACBEE} 
#box #tab li{width:80px;height:18px;padding-top:7px;margin-right:10px;text-align:center;float:left;background:#F3F8FD;cursor:pointer} 
#box #tab li.on{width:78px;height:19px;padding-top:5px;border:1px solid #AACBEE;border-bottom:none;color:#00f;background:#E8F2F7;position:relative;top:1px} 

#box #tab_con{border:1px solid #AACBEE;border-top:none;padding:20px} 
#box #tab_con li{display:none} 
#box #tab_con #tab_con_1{display:block}  
</style>  
</head>  

<body>  
<div id="box">  
    <ul id="tab">  
        <li class="on" id="tab_1" onMouseOver="switchTab(1)">新闻</li>  
        <li id="tab_2" onMouseOver="switchTab(2)">财经</li>  
        <li id="tab_3" onMouseOver="switchTab(3)">娱乐</li>
        <li id="tab_4" onMouseOver="switchTab(4)">军事</li>
    </ul>  
    <ul id="tab_con">  
        <li id="tab_con_1">新闻内容</li>  
        <li id="tab_con_2">财经内容</li>  
        <li id="tab_con_3">娱乐内容</li> 
        <li id="tab_con_4">娱乐内容2</li>  
    </ul>  
</div>

<script type="text/javascript">  
var tabTimer = null;  
function G(obj){  
	return document.getElementById(obj);  
}  
function switchTab(n){
	for(var i = 1; i<= 4; i++){  
		G("tab_" + i).className = "";  
		G("tab_con_" + i).style.display = "none";  
	}  
	G("tab_" + n).className = "on";  
	G("tab_con_" + n).style.display = "block";  
	autoSwitchTab(n);  
	//alert("switchTab");
}
function autoSwitchTab(j){
	clearTimeout(tabTimer); 
	var j = (j >= 4) ? 1 : j + 1;
	tabTimer = setTimeout("switchTab("+j+")",1000);  
}  
autoSwitchTab(1);  
</script>  
</body>  
</html>

代码原理：

通过style.


                

        

        

    




    

      

        

            

              
                
                  marui1982
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
2022-03-03 html网页布局练习(二):使用float浮动+html5新增标签进行网页布局

				
			

			

				

					GAARA
				

				

					03-03
					
					417
					
				

			

		

		

			
				
页面由头部header+轮拨图banner+选项卡片section+案例case+客户client+关于我们&新闻aboutUs&news+底部footer组成
头部底部等等用到了h5新增标签
使用float浮动进行盒模型的水平布局,使用内外边距padding和margin进行上下左右间距的拉开
在margin:top塌陷的地方是通过改为设置padding:top再将height减去相应像素来实现的
网页在浏览器中的居中显示是通过设置html的宽度100%,body设置一个固定宽度然后margin:0 au

			
		

	



                

              
                



	

		

			

				
					
minisite-controller-styles

				
			

			

				

					03-17
				

			

		

		

			
				
 页面在您编辑文件时自动更新。  可以在上访问。 可以在pages/api/hello.js编辑此端点。  pages/api目录映射到/api/* 。 此目录中的文件被视为而不是React页面。 了解更多 要了解有关Next.js的更多信息，请查看以下...

			
		

	



                


  
              

                


	

		

			

				
					
js动态载入css文件,使用js加载器动态加载外部js、css文件

				
			

			

				

					weixin_33998152的博客
				

				

					08-03
					
					670
					
				

			

		

		

			
				
let MiniSite = newObject();/*** 判断浏览器*/MiniSite.Browser={ie:/msie/.test(window.navigator.userAgent.toLowerCase()),moz:/gecko/.test(window.navigator.userAgent.toLowerCase()),opera:/opera/.test(window.n...

			
		

	





	

		

			

				
					
Springmvc+Swagger2自动生成API文档

				
			

			

				

					weixin_38023814的博客
				

				

					07-22
					
					1200
					
				

			

		

		

			
				
maven项目下

pom.xml


 
&lt;dependency&gt;
	  &lt;groupId&gt;io.springfox&lt;/groupId&gt;
	  &lt;artifactId&gt;springfox-swagger2&lt;/artifactId&gt;
	  &lt;version&gt;2.4.0&lt;/version&gt;
&lt;/depe

			
		

	



		

			
		



	

		

			

				
					
css面试总结

				
			

			

				

					Li_xiaodian的博客
				

				

					01-13
					
					403
					
				

			

		

		

			
				
（以下是自己在网络上总结的css基础面试题,欢迎补充和改正）



class和id有什么不同？

id类名唯一，在页面中只能出现一次，更多地被用来实现宏伟布局和设计包含块，或包含框的样式。 
id是先确定页面的结构和内容，然后再为它定义样式 
class类名不唯一，被多次调用，先确定样式在确定结构和内容



CSS resetting和CSS normalizing 有什么不同？你倾向于使用哪

			
		

	





	

		

			

				
					
ajax python网页聊天 一对多_面对JS渲染的网页如何分析Ajax请求

				
			

			

				

					weixin_39603132的博客
				

				

					12-22
					
					50
					
				

			

		

		

			
				
我们在用python进行爬虫时，可能都遇到过有些网页直接请求得到的 HTML 代码里面，并没有我们需要的数据，也就是我们在浏览器中看到的内容。这就是因为这些信息是通过Ajax加载的，并且通过js渲染生成的。这个时候我们就需要分析这个网页的请求了。上一篇给大家讲解了什么是Cookie及模拟登录的操作流程，今天给大家带来的是如何分析网页的Ajax请求。什么是AjaxAJAX即“Asynchronous...

			
		

	





	

		

			

				
					
网页设计简史看设计&代码“隔膜”

				
			

			

				

					jessicaiu的博客
				

				

					09-11
					
					244
					
				

			

		

		

			
				
本文来自网易云社区作者：马宝设计与代码之间隔膜所在？既然你诚心诚意地问了，我就大发慈悲地告诉你。为了防止地球被破坏，为了维护世界的和平，为了贯彻爱与真实的邪恶~，我是穿梭在前端与设计之间爱与美丽的落花生（化身），可爱又迷人的变态角色（两者之间的纽带），白洞，白色的明天~~嗯， 似乎很跑偏，客官莫急带着回忆往下看神往而又心动到不行的GIF神图 勾起了我多少的童年回忆。许多网页设计的问题并不止一种解决...

			
		

	





	

		

			

				
					
前端手动部署与自动化部署

					
最新发布

				
			

			

				

					hktkkkk的博客
				

				

					12-21
					
					626
					
				

			

		

		

			
				
先购买服务器安装vscode插件连接服务器连接成功。

			
		

	





	

		

			

				
					
详解 nginx location ~ .*\.(js|css)?$ 什么意思？

				
			

			

				

					weixin_42840978的博客
				

				

					03-04
					
					549
					
				

			

		

		

			
				
语法规则： location [=||*|^~] /uri/ { … }
= 开头表示精确匹配

^~ 开头表示uri以某个常规字符串开头，理解为匹配 url路径即可。nginx不对url做编码，因此请求为/static/20%/aa，可以被规则^~ /static/ /aa匹配到（注意是空格）。
开头表示区分大小写的正则匹配

~*  开头表示不区分大小写的正则匹配
!和!*分别为区分大小写不匹配及不区分大小写不匹配 的正则
/ 通用匹配，任何请求都会匹配到。
多个location配置的情况下匹配顺序为（

			
		

	





	

		

			

				
					
使用js加载器动态加载外部Javascript文件

				
			

			

				

					程序员蒋老湿的博客
				

				

					04-12
					
					465
					
				

			

		

		

			
				
今天在网上找到了一个可以动态加载js文件的js加载器，具体代码如下：
JsLoader.js

 1 var MiniSite=new Object();
 2 /**
 3  * 判断浏览器
 4  */
 5 MiniSite.Browser={   
 6     ie:/msie/.test(window.navigator.userAgent.toLowerCase())

			
		

	





	

		

			

				
					
MiniSite做GuiaTeleSul「MiniSite do GuiaTeleSul」-crx插件

				
			

			

				

					03-19
				

			

		

		

			
				
GuiaTeleSul.com.br的商业和专业搜索迷你网站 指南迷你网站。 用于方便访问在GuiaTeleSul注册的所有公司和专业人员。 只需点击一下，你就可以在巴西的任何地方找到你想要的东西。 支持语言:português (Brasil)

			
		

	





	

		

			

				
					
JS加载器如何动态加载外部js文件

				
			

			

				

					10-22
				

			

		

		

			
				
JavaScript是一种强大的客户端脚本语言，广泛用于网页交互和页面动态更新。在开发过程中，有时我们需要在用户触发某个事件或者根据特定条件才加载某些JavaScript库或脚本，这就是动态加载外部js文件的需求。本文将...

			
		

	





	

		

			

				
					
如何动态加载外部Javascript文件

				
			

			

				

					11-22
				

			

		

		

			
				
最近在网上找到了一个可以动态加载js文件的js加载器，具体代码如下： JsLoader.js   var MiniSite=new Object(); /**  * 判断浏览器  */ MiniSite.Browser={  ie:/msie/.test(window.navigator.userAgent....

			
		

	





	

		

			

				
					
eleventy-fundraising-minisite

				
			

			

				

					03-28
				

			

		

		

			
				
具有Eleventy，TailwindCSS和Foxy.io的单页JAMstack电子商务网站启动器 几次点击即可启动您的电子商务。 非常适合非营利筹款的微型网站，现场活动或任何希望建立干净的一页电子商务或捐赠网站的人。 这是谁的对象...

			
		

	





	

		

			

				
					
开源图表c3（基于javascript）

				
			

			

				

					newmarui的专栏
				

				

					03-18
					
					2153
					
				

			

		

		

			
				
开源代码位置： http://c3js.org/
下载：https://github.com/masayuki0812/c3/releases/tag/0.4.10
linux下运行的问题：
不能直接运行sample中的内容，需要修改引用文件位置

			
		

	





	

		

			

				
					
css:各种样式相关资料列表（tree、button、nav）

				
			

			

				

					newmarui的专栏
				

				

					04-26
					
					1903
					
				

			

		

		

			
				
1.button： 
  http://blog.csdn.net/lushuaiyin/article/details/8118669 （代码可用且较为简洁，效果较好）
2.布局： 
3.横向导航：
http://blog.csdn.net/lushuaiyin/article/details/7064638 （代码可用，效果普通）


4.树形菜单：
http://blog.c

			
		

	





	

		

			

				
					
css：浮层

				
			

			

				

					newmarui的专栏
				

				

					05-08
					
					1331
					
				

			

		

		

			
				
1.绝对浮层：
 
 close


2.相对位置浮层：
需要父元素的position:relative（父元素的top、left可以为空）
子元素的浮层依然使用position:absolute即可


11




3.浮层相对位置（top、right、left）
4.浮层居中显示：
使用top：50%，left：50%，并向左移动1/2个浮层宽度，向上移动1/2个浮层

			
		

	





	

		

			

				
					
php&javascript 中的 绝对路径与相对路径

				
			

			

				

					newmarui的专栏
				

				

					03-18
					
					1157
					
				

			

		

		

			
				
1.在php中，会出现requie文件的引用出错问题 http://www.111cn.net/phper/31/42982.htm
2.javascrip的相对路径使用分两种：
a. "/xxx/yyy/zz.html" 的使用方法类似于绝对路径（不含域名）
b."../yy/zz/html"（与php的相对路径方式相近）

			
		

	





	

		

			

				
					
可以查看的计算机储存技术 图片链接

				
			

			

				

					06-10
				

			

		

		

			
				
2. 固态硬盘（SSD）：https://www.samsung.com/semiconductor/minisite/ssd/product/consumer/970evo/  3. USB闪存驱动器：https://www.sandisk.cn/home/usb-flash  4. SD存储卡：https://www.sdcard.org/  5. 光盘...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值