选项卡

最新推荐文章于 2023-09-19 16:30:43 发布
最新推荐文章于 2023-09-19 16:30:43 发布
阅读量410 收藏
点赞数
分类专栏： HTML5+CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vivianluolita/article/details/53078620
版权

HTML


<pre style="font-family: 宋体; font-size: 9pt; background-color: rgb(255, 255, 255);"><pre name="code" class="html"><!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>发布</title>
    <link rel="stylesheet" type="text/css" href="../css/main.css">
    <link rel="stylesheet" type="text/css" href="../css/ebookMaker/wxPicturePublish.css">
    <script src="../js/jquery-1.8.3.min.js"></script>
</head>
<body>
<!-- 头部样式 -->
<div class="Top">
    <a href="wxPictureCutpicAdd.html" class="BtnBack"></a>
    <h1>发布</h1>
</div>
<div class="WxBookPublish" >
    <div class="FormItemEdit">
        <div class="FormItemEditContent">
        <h2 class="WxBookPublishTabWords">阅读权限</h2>
        <ul class="WxBookPublishTab"><li class="WxBookPublishTabList Selected"><a href="javascript:void(0)">免费</a></li><li class="WxBookPublishTabList"><a href="javascript:void(0)">收费</a></li><li class="WxBookPublishTabList"><a href="javascript:void(0)">密码</a></li></ul>
        </div>
    </div>
</div>
<!--免费-->
<div class="FormItemEditContent2">
    <a href="javascript:void(0)">
    <div class="FormItemEditForFree">
        <div class="FormItemEditBgMusic">
            <h2>背景音乐</h2>
            <div class="BtnMusicCon"></div>
            <b class="FormItemEditBgMusicRight">童年记忆-班得瑞</b>
            <div class="BtnMusic"></div>
        </div>
        </div>
        </a>
        <!--按钮-->
        <div class="Container">
            <div class="BtnContainer">
                <a href="javascript:void(0)" class="DldNow">立即发布</a>
            </div></div>
        <!--Pop-->
        <div class="PopContent" style="display:none">
            <img src="../css/images/Mobile_bg0318.png">
            <a class="PopContentWord" href="javascript:void(0)">已发布</a>
        </div>
    </div>

<!--收费-->
<div class="FormItemEditContent2" style="display: none">
    <div class="FormItemEditCharge">
        <div class="FormItemEditChargeInput">
            <input type="text" class="TextBox" placeholder="请输入价格" id="text">
            <a href="javascript:void(0)" class="BtnClear" οnclick="javascript:document.getElementById('text').value=''"></a>
        </div>
    </div>
    <div class="FormItemEditChargeTip">
        <p>说明： 任何人可免费阅读本书30%的内容，销售收入归作者所有</p>
    </div>
    <a href="javascript:void(0)">
    <div class="FormItemEditBgMusic">
        <h2>背景音乐</h2>
        <b class="FormItemEditBgMusicRight">请选择背景音乐</b>
        <a href="javascript:void(0)" class="BtnMusic"></a>
    </div>
        </a>
    <!--按钮-->
    <div class="Container">
        <div class="BtnContainer">
            <a href="javascript:void(0)" class="DldNow">立即发布</a>
        </div></div>
</div>
<!--密码-->
<div class="FormItemEditContent2" style="display: none">
    <div class="FormItemEditCharge">
        <div class="FormItemEditChargeInput">
            <input type="text" class="TextBox" placeholder="请输入密码" id="TextPassword">
            <a href="javascript:void(0)" class="BtnClear" οnclick="javascript:document.getElementById('TextPassword').value=''"></a>
        </div>
    </div>
    <div class="FormItemEditChargeTip">
        <p>说明： 本书需要密码才能阅读。</p>
    </div>
   <a href="javascript:void(0)">
    <div class="FormItemEditBgMusic">
        <h2>背景音乐</h2>
        <b class="FormItemEditBgMusicRight">请选择背景音乐</b>
        <a href="javascript:void(0)" class="BtnMusic"></a>
    </div>
   </a>
    <!--按钮-->
    <div class="Container">
        <div class="BtnContainer">
            <a href="javascript:void(0)" class="DldNow">立即发布</a>
        </div></div>
</div>
<script>
    $(function(){
        $(".WxBookPublishTab li").click(function(){
            $(".WxBookPublishTab li ").eq($(this).index()).addClass("Selected").siblings().removeClass('Selected');
            $(".FormItemEditContent2").hide().eq($(this).index()).show();
        });
        $(".FormItemEditForFree .DldNow").click(function(){
            $(".PopContent").show(200);
            return false;
        })
        $(window).click(function(){
            $(".PopContent").hide(200);
        })
    })
</script>




</body>
</html>


 <!doctype html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/> <title>发布</title> <link rel="stylesheet" type="text/css" href="../css/main.css"> <link rel="stylesheet" type="text/css" href="../css/ebookMaker/wxPicturePublish.css"> <script src="../js/jquery-1.8.3.min.js"></script></head><body><!-- 头部样式 --><div class="Top"> <a href="wxPictureCutpicAdd.html" class="BtnBack"></a> <h1>发布</h1></div><div class="WxBookPublish" > <div class="FormItemEdit"> <div class="FormItemEditContent"> <h2 class="WxBookPublishTabWords">阅读权限</h2> <ul class="WxBookPublishTab"> <li class="WxBookPublishTabList"><h2><a href="javascript:void(0)">密码</a></h2></li> <li class="WxBookPublishTabList"><h2><a href="javascript:void(0)">收费</a></h2></li> <li class="WxBookPublishTabList selected"><h2><a href="javascript:void(0)">免费</a></h2></li> </ul> </div> </div> <!--BgMusic--> <div class="FormItemEditContent2" style="display: none"> <div class="FormItemEditCharge"> <div class="FormItemEditChargeInput"> <input type="text" class="TextBox" placeholder="请输入密码" id="TextPassword"> <a href="javascript:void(0)" class="BtnClear" οnclick="javascript:document.getElementById('TextPassword').value=''"></a> </div> </div> <div class="FormItemEditChargeTip"> <p>说明： 本书需要密码才能阅读。</p> </div> <div class="FormItemEditBgMusic"> <h2>背景音乐</h2> <h2 class="FormItemEditBgMusicRight">请选择背景音乐</h2> <a href="javascript:void(0)" class="BtnMusic"></a> </div> <!--按钮--> <div class="Container"> <div class="BtnContainer"> <a href="javascript:void(0)" class="DldNow">立即发布</a> </div></div> </div></div> <!--Charge--> <div class="FormItemEditContent2" > <div class="FormItemEditCharge"> <div class="FormItemEditChargeInput"> <input type="text" class="TextBox" placeholder="请输入价格" id="text"> <a href="javascript:void(0)" class="BtnClear" οnclick="javascript:document.getElementById('text').value=''"></a> </div> </div> <div class="FormItemEditChargeTip"> <p>说明： 任何人可免费阅读本书30%的内容，销售收入归作者所有</p> </div> <div class="FormItemEditBgMusic"> <h2>背景音乐</h2> <h2 class="FormItemEditBgMusicRight">请选择背景音乐</h2> <a href="javascript:void(0)" class="BtnMusic"></a> </div> <!--按钮--> <div class="Container"> <div class="BtnContainer"> <a href="javascript:void(0)" class="DldNow">立即发布</a> </div></div> </div><!--ForFree--> <div class="FormItemEditContent2" style="display: none"> <div class="FormItemEditForFree"> <div class="FormItemEditBgMusic"> <h2>背景音乐</h2> <a href="javascript:void(0)" class="BtnMusicCon"></a> <h2 class="FormItemEditBgMusicRight">童年记忆-班得瑞</h2> <a href="javascript:void(0)" class="BtnMusic"></a> </div> <!--按钮--> <div class="Container"> <div class="BtnContainer"> <a href="javascript:void(0)" class="DldNow">立即发布</a> </div></div> </div> </div><!--Pop--><div class="PopContent" style="display:block"> <img src="../css/images/Mobile_bg0317.png"> <a href="javascript:void(0)">已发布</a></div><script> $(function(){ $(".WxBookPublishTab li").click(function(){ $(".WxBookPublishTab li").eq($(this).index()).addClass("selected").siblings().removeClass('selected'); $(".FormItemEditContent2").hide().eq($(this).index()).show(); }); })</script></body></html> 

 

 

 

 

css
 


 
 

 

<pre name="code" class="html">body{
    margin:0px auto;
    background:#efeff4;
    position:relative;
    display:block;
    padding:44px 0px 64px 0px;
}
/* 目录书名 */
.WxBookPublish{
    padding-top: 10px;
}
.WxBookPublish .FormItemEdit {
    background: #ffffff;
    position: relative;
    font-size: 16px;
    height: 44px;
    line-height: 44px;
    white-space:nowrap;
}
.WxBookPublish .FormItemEdit:before {
    content: " ";
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    border-top: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    z-index: 5;
}
.WxBookPublish .FormItemEdit:after {
    content: " ";
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    border-bottom: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    z-index: 5;
}


.WxBookPublish .FormItemEdit .WxBookPublishTabWords
{
    font-size: 16px;
    left: 16px;
    position: absolute;
}

.WxBookPublish .FormItemEdit .WxBookPublishTab{
    border-radius:5px;
    width: 50%;
    white-space:nowrap;
    float: right;
    margin-right: 16px;
    margin-top: -1px;
    vertical-align: middle;
}

.WxBookPublish .FormItemEdit .WxBookPublishTab li{
    height: 30px;
    border: 1px solid #049802;
    border-right: 1px solid #049802;
    text-align: center;
    width: 33.33%;
    white-space:nowrap;
    display:inline-block;
}

.WxBookPublish .FormItemEdit .WxBookPublishTab li:first-child{
    border-right:none;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}

.WxBookPublish .FormItemEdit .WxBookPublishTab li:last-child{
    border-left:none;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}



.WxBookPublish .FormItemEdit .WxBookPublishTab .WxBookPublishTabList a{
    font-size: 14px;
    line-height:30px;
    height: 30px;
    color:#049802;
    display: block;

}
.WxBookPublish .InputTips {
    font-size: 14px;
    line-height: 1.7;
    color: #888888;
    padding: 0px 16px;
    margin-bottom: 10px;
    text-align: center;
}
.WxBookPublish .FormItemEdit .TextBox {
    height: 24px;
    width: 100%;
    border: 0px;
    border-radius: 0px;
    line-height: 24px;
    padding: 10px 0px;
    font-size: 16px;
    font-weight: normal;
}
/**/
.WxBookPublish .FormItemEditContent2{
    width: 100%;
}
.WxBookPublish .FormItemEditBgMusic {
    background: #ffffff;
    margin-top:30px;
    position: relative;
    font-size: 16px;
    height: 44px;
    line-height: 44px;
    padding: 0px 16px;
    color: #333333;
}

.WxBookPublish .FormItemEditBgMusic b{
  font-size: 16px;
}
.WxBookPublish .FormItemEditBgMusicRight {
    position:absolute;
    font-size: 14px;
    color: #888888;
    right:30px;
    top: 0px;
}
.WxBookPublish .BtnMusic{
    width: 44px;
    height: 44px;
    background: url(../images/Mobile_bg0316.png) center center no-repeat;
    background-size: 8px 15px;
    position: absolute;
    right: 0px;
    top: 0px;
}
.WxBookPublish .FormItemEditBgMusic:before {
    content: " ";
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    border-top: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    z-index: 5;
}
.WxBookPublish .FormItemEditBgMusic:after {
    content: " ";
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    border-bottom: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    z-index: 5;
}

.WxBookPublish .FormItemEditBgMusic h2{
    font-size:16px;
}


.WxBookPublish .WxBookPublishTab .Selected{
    background-color:#049802;
}

.WxBookPublish .WxBookPublishTab .Selected a{
    color: #f4f9f4;
}


.WxBookPublish .FormItemEdit .WxBookPublishTab li.Selected a{
    background-color:#049802;
    color: #f4f9f4;
}

.Container{
    width:100%;
    height:60px;
    position:absolute;
    left:0px;
    margin-top: 20px;
}
.Container .DldNow{
    display: block;
    height: 38px;
    line-height: 38px;
    text-align: center;
    vertical-align: middle;
    color: #ffffff;
    background: #04be02;
    border: 1px solid rgba(0,0,0,0.2);
    padding: 0px 8px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    left: 15px;
    right: 15px;
    top:10px;
    /* 字体溢出设置 */
    position: absolute;
    white-space:nowrap;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
}

/*Page2:charge*/

.FormItemEditContent2 .FormItemEditCharge{
    background: #ffffff;
    position: relative;
    margin-top:20px;
    font-size: 16px;
    height: 44px;
    line-height: 44px;
    padding: 0px 16px;
    color: #333333;
}

.FormItemEditContent2 .FormItemEditCharge:before {
    content: " ";
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    border-top: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    z-index: 5;
}
.FormItemEditContent2 .FormItemEditCharge:after {
    content: " ";
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    border-bottom: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    z-index: 5;
}

.FormItemEditContent2 .FormItemEditChargeInput{
    margin-left: 32px;
}

.FormItemEditContent2 .FormItemEditChargeInput .TextBox {
    width: 100%;
    height: 24px;
    border: 0px;
    padding-right:-10px ;
    border-radius: 0px;
    line-height: 24px;
    font-size: 16px;
    font-weight: normal;
    color: #000066;
}
.FormItemEditContent2 .FormItemEditChargeInput .BtnClear {
    width: 44px;
    height: 44px;
    background: url(../images/Mobile_bg0215.png) center center no-repeat;
    background-size: 16px 16px;
    position: absolute;
    right: -6px;
    top: 0px;
}

.FormItemEditContent2 .FormItemEditChargeTip{
    font-size: 14px;
    line-height: 1.7;
    color: #888888;
    padding-top: 12px;
    padding-left: 48px;
    padding-right:16px;
    margin-bottom: 10px;
}

.FormItemEditContent2 .FormItemEditBgMusic {
    background: #ffffff;
    margin-top:24px;
    position: relative;
    font-size: 12px;
    height: 44px;
    line-height: 44px;
    padding: 0px 16px;
    color: #333333;
}

.FormItemEditContent2 .FormItemEditBgMusic:before {
    content: " ";
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    border-top: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    z-index: 5;
}
.FormItemEditContent2 .FormItemEditBgMusic:after {
    content: " ";
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    border-bottom: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    z-index: 5;
}



.FormItemEditContent2 .FormItemEditBgMusic b{
    font-size: 14px;
}
.FormItemEditContent2 .FormItemEditBgMusicRight {
    position:absolute;
    font-size: 14px;
    color: #888888;
    right:30px;
    top: 0px;
}
.FormItemEditContent2 .BtnMusic{
    width: 44px;
    height: 44px;
    background: url(../images/Mobile_bg0316.png) center center no-repeat;
    background-size: 8px 15px;
    position: absolute;
    right: 0px;
    top: 0px;
}


/*ForFree*/
.FormItemEditContent2 .BtnMusicCon{
    width: 44px;
    height: 44px;
    background: url(../images/Mobile_bg0317.png) center center no-repeat;
    background-size: 15px 17px;
    position: absolute;
    right: 130px;
    top: 0px;
}

/*Pop*/

.PopContent{
    position: relative;
    width: 120px;
    height: 120px;
    background-color:#5a5a5b;
    margin: 0 auto;
    margin-top:90px;

    border-radius: 5px;
}

.PopContent img{
    width: 56px;
    height: 39px;
    vertical-align: middle;
    text-align: center;
    position: absolute;
    top: 15px;
    left: 35px;


}
.PopContent .PopContentWord{
    position: absolute;
    top:80px;
    color: #d1d1d2;
    left: 35px;
}


 

 

 

 

 

 


 

                

        

        

    




    

      

        

            

              
                
                  Vivianluolita
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
JS选项卡

				
			

			

				

					xing942012的博客
				

				

					11-25
					
					2434
					
				

			

		

		

			
				
我们做一个简易的选项卡，但是适用所有的选项卡（自改），首先我们来先把页面基本样式写好


<ul>
			<li class="active">周一</li>
			<li>周三</li>
			<li>周五</li>
		</ul>
		<div class="box1 block">医务科</div>
		<div class="box2">警卫科</div>


			
		

	



                

              
                



	

		

			

				
					
6.6 创建选项卡窗体（上）

				
			

			

				

					复行数十步
				

				

					12-16
					
					2255
					
				

			

		

		

			
				
目录

  1．选项卡窗体的类型

  2．创建独立型选项卡窗体

  在通常情况下，计算机中管理的信息非常多，应用选项卡控件可以在窗口的有限空间中，高效地管理更多的信息。选项卡不仅广泛地应用在Windows操作系统本身，而且还普遍应用在Office中。在Access系统同样也应用广泛，例如窗体的属性表就是一个典型的应用。
  除了选项卡控件之外，Access还提供了分页控件，两者都是对窗体界面进行分页。分页控件实现竖直方向的分页，与Word中的分页符相似，而选项卡控件则实现在水平方向的分页...

			
		

	



                


  
              

                


	

		

			

				
					
ajax方式和修改form属性action(提交路径)方式提交form表单

				
			

			

				

					nrsc
				

				

					11-28
					
					1万+
					
				

			

		

		

			
				
浏览器和服务器的数据交互方式主要有六种:

1.表单提交;
2.超链接;
3.js/jquery方式
    3.1 地址栏的替换 location.href="地址栏";(本文有)
    3.2 js提交表单(本文有)
    3.3 ajax(本文有)


前台页面代码如下:

			
		

	





	

		

			

				
					
vue中点击按钮，添加一排输入框

					
热门推荐

				
			

			

				

					qq_39692513的博客
				

				

					06-24
					
					2万+
					
				

			

		

		

			
				
vue界面：
&lt;template&gt;
  &lt;div&gt;
  &lt;el-button @click="add"&gt;添加&lt;/el-button&gt;
  &lt;el-table :data="data"&gt;
  &lt;el-table-column prop="name" label="名称"&amp

			
		

	



		

			
		



	

		

			

				
					
js实现选项卡

				
			

			

				

					qq_52440306的博客
				

				

					09-23
					
					6915
					
				

			

		

		

			
				
选项卡在网页中经常使用，那么如何实现选项卡呐？
现在的框架省去dom操作，开发者只需要关注数据即可，那么真的不需要操作dom了吗，是需要的，只不过程序已经帮忙做了这件事，纯粹的数据逻辑也将前端变得更难了。
整体结构
<div class="app" id="app">
			<div class="key-left">
				<div class="tap">1</div>
				<div class="tap">2</div>
	

			
		

	





	

		

			

				
					
LayUI动态选项卡的使用

				
			

			

				

					weixin_74268571的博客
				

				

					07-12
					
					3382
					
				

			

		

		

			
				
选项卡（Tab）是指Web浏览器中显示多个网页或文档的标签式界面。每个选项卡相当于一个独立的窗口。选项卡的详细使用步骤。

			
		

	





	

		

			

				
					
mui底部选项卡切换功能

				
			

			

				

					wJulio的博客
				

				

					07-08
					
					2780
					
				

			

		

		

			
				
mui底部选项卡实现切换功能


<!--  main.html 入口文件 -->  
<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=devi...

			
		

	





	

		

			

				
					
计算机的选项卡,电脑的选项卡是什么?在哪里可以找出

				
			

			

				

					weixin_39896617的博客
				

				

					07-28
					
					2558
					
				

			

		

		

			
				
依次点击“文件”菜单/“页面设置”，在“页面设置”对话框第三个选项卡就是“版式”选项卡(第一个是“页边距”，第二个是“纸张”，第四个是“文档网格”)。点击“版式”选项卡右上的“？”就可以打开页面设置的帮助信息，下方有包括版式选项卡在内的四项，点其中的“版式选项卡”就可以看到以下帮助信息：节节的起始位置 列出 Microsoft Word 开始新的文档节的位置。取消尾注 禁止在当前节中打印尾注。该选...

			
		

	





	

		

			

				
					
QTabWidget 类 (选项卡部件)

				
			

			

				

					zxf347085420的博客
				

				

					09-19
					
					1860
					
				

			

		

		

			
				
③、 tabShape： TabShape 访问函数： TabShape tabShape() const;6、 QTabWidget 类中的属性和函数大多与 QTabBar 中的属性和函数是相同的，对于相同的属。 以上函数表示，把页面部件 page 和具有文本 label 和(或)图标 icon 的选项卡。此属性描述选项卡的形状，该属性对应于 QTabBar 的 shape 属性，其外观可参阅该类。以上信号表示，单击或双击 index 处的选项卡时发送此信号， index 是单击选项卡的索。

			
		

	





	

		

			

				
					
Layui-选项卡

				
			

			

				

					weixin_54668937的博客
				

				

					03-08
					
					3782
					
				

			

		

		

			
				
Layui-选项卡
文献种类：专题技术文献；
开发工具与关键技术：    VS、JS
作者：方建恒   ；年级：20级    ；撰写时间： 2022  年  3 月  8日
在一些网页的制作中，往往会用到选项卡切换的功能，
今天我们就来了解一下如何运用Layui的选项卡组件。
首先我们要把layui的js和css引入，如图：

接下来是HTML部分：
我们用ul标签把选项卡的头部包裹起来，
再用div标签把选项卡的内容包裹起来，如图：

接下来是script部分：
因为tab组件依赖于element组件，所

			
		

	





	

		

			

				
					
fragment实现选项卡界面

				
			

			

				

					11-24
				

			

		

		

			
				
而这种底部选项卡的风格界面的实现也由ActivityGroup转向了Fragment。先了，费话不多说了，下面我会一步一步教您怎么实现这个界面。在动手之前，我可能需要把我做好的样式图给你看一下，以遍让您有一个心里预期。

			
		

	





	

		

			

				
					
layui选项卡效果实现代码

				
			

			

				

					08-30
				

			

		

		

			
				
layui选项卡效果实现代码  layui是一个前端UI框架，提供了多种实用的UI组件和功能，选项卡效果是其中之一。本文将详细介绍layui选项卡效果的实现代码。  一、layui选项卡效果的基本实现  layui选项卡效果的基本实现...

			
		

	





	

		

			

				
					
Bootstrap选项卡动态切换效果

				
			

			

				

					09-01
				

			

		

		

			
				
Bootstrap选项卡动态切换效果是网页设计中常用的一种交互方式，它允许用户在多个视图间轻松切换，无需刷新整个页面。在本示例中，主要关注的是如何在Bootstrap框架下实现登录和注册功能的选项卡切换。  首先，我们来...

			
		

	





	

		

			

				
					
Android开发之选项卡功能的实现方法示例

				
			

			

				

					08-30
				

			

		

		

			
				
在Android应用开发中，选项卡（Tab）功能是一种常见的用户界面设计，它允许用户在不同的视图或功能之间轻松切换。在本示例中，我们将深入探讨如何在Android应用中实现选项卡功能，主要使用`TabHost`组件。`TabHost`...

			
		

	





	

		

			

				
					
TabSwitch选项卡切换

				
			

			

				

					11-22
				

			

		

		

			
				
在IT领域，选项卡切换（TabSwitch）是一种常见的用户界面设计模式，广泛应用于各种软件、浏览器和应用程序中。它提供了一种高效的方式来组织和切换不同的视图或工作区，允许用户在同一窗口内处理多个任务，而无需...

			
		

	





	

		

			

				
					
Labview选项卡之实现被选择选项卡工作

				
			

			

				

					08-15
				

			

		

		

			
				
Labview选项卡之实现被选择选项卡工作

			
		

	





	

		

			

				
					
多角色选项卡登录效果

				
			

			

				

					09-25
				

			

		

		

			
				
【多角色选项卡登录效果】是一种常见的用户界面设计，它允许用户在多个角色之间切换，以便根据不同的身份进行登录操作。这种设计通常用于有不同权限和功能的角色，如管理员、普通用户、供应商等。在本案例中，登录...

			
		

	





	

		

			

				
					
安卓选项卡

				
			

			

				

					12-06
				

			

		

		

			
				
在Android开发中，选项卡（Tab）是一种常见的用户界面组件，用于组织和展示多个相互关联的内容页面。这种设计模式能够帮助用户在不同的视图或功能之间轻松切换，提高应用程序的可导航性和用户体验。本篇文章将深入...

			
		

	





	

		

			

				
					
tkinter 选项卡

					
最新发布

				
			

			

				

					05-22
				

			

		

		

			
				
Tkinter 选项卡是 Tkinter 提供的一个组件，可以让用户在多个选项之间切换。每个选项卡都有一个标题，用户可以点击标题来选择相应的选项卡。选项卡通常用于将相似的内容分组显示，以便用户可以更方便地浏览和操作。 ...

			
		

	



              



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

  

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

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值