bootstrap tab标签

最新推荐文章于 2021-09-25 18:53:44 发布
最新推荐文章于 2021-09-25 18:53:44 发布
阅读量243 收藏
点赞数
文章标签： javascript java ViewUI
原文链接：http://www.cnblogs.com/SEVEN-wkq/p/6957182.html
版权

标签页用法

       标签页组件分为两部分，导航区与面板区。导航区用于绑定点击事件，切换对应的面板。

       导航区为一个<ul>列表，要求<ul>带"nav nav-tabs"或"nav nav-pills"这两种类名。<li>下的标签要求有data-toggle="tab"属  性，你可以通过data-target或href指定对应的面板。

       面板区容器要求带"tab-content"类名，下面的每个面板都要求带"tab-pane"类名。

导航栏：

<!DOCTYPE html>
<html>
<head>
<title>tab.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=gbk">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet"
	href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script
	src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script
	src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
	body{margin: 0 auto;width:800px;margin-top: 60px;}
	.tab-content{padding:20px 20px;}
	.log{float:right;list-style: none;margin-top:-19px;}
</style>
</head>

<body>
<ul class="nav nav-pills">  
  <li  class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>  
  <li ><a href="#Java" role="tab" data-toggle="tab">Java</a></li>  
  <li ><a href="#JavaScript" role="tab" data-toggle="tab">JavaScript</a></li>  
  <li ><a href="#JQuery" role="tab" data-toggle="tab">JQuery</a></li>  
  <li ><a href="#HTML" role="tab" data-toggle="tab">HTML</a></li> 
  <li ><a href="#CSS" role="tab" data-toggle="tab">CSS</a></li>
</ul>
  
<!-- 面板区 -->  
<div class="tab-content">  
  <div role="tabpanel" class="tab-pane active" id="home">Home</div>  
  <div role="tabpanel" class="tab-pane" id="Java">Java</div>  
  <div role="tabpanel" class="tab-pane" id="JavaScript">JavaScript</div>  
  <div role="tabpanel" class="tab-pane" id="JQuery">JQuery</div>  
  <div role="tabpanel" class="tab-pane" id="HTML">HTML</div>  
  <div role="tabpanel" class="tab-pane" id="CSS">CSS</div>  
</div>  

</body>
</html>

菜单栏：

<!DOCTYPE html>
<html>
<head>
<title>tab_right.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=gbk">
<!-- Bootstrap3.3.5 CSS -->
<link rel="stylesheet"
	href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script
	src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script
	src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	
<style>
.panel-group {
	max-height: 770px;
	overflow: auto;
}

.leftMenu {
	margin: 10px;
	margin-top: 5px;
}

.leftMenu .panel-heading {
	font-size: 14px;
	padding-left: 20px;
	height: 36px;
	line-height: 36px;
	color: white;
	position: relative;
	cursor: pointer;
} /*转成手形图标*/
.leftMenu .panel-heading span {
	position: absolute;
	right: 10px;
	top: 12px;
}

.leftMenu .menu-item-left {
	padding: 2px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 6px;
}

.leftMenu .menu-item-left:hover {
	background: #C4E3F3;
	border: 1px solid #1E90FF;
}
.li_tab{
	width:270px;
}
</style>
</head>

<body>
	<div class="row">
		<div class="col-md-2">
			<div class="panel-group table-responsive" role="tablist">
				<div class="panel panel-primary leftMenu">
					<!-- 利用data-target指定要折叠的分组列表 -->
					<div class="panel-heading" id="collapseListGroupHeading1"
						data-toggle="collapse" data-target="#collapseListGroup1"
						role="tab">
						<h4 class="panel-title">
							分组1 <span class="glyphicon glyphicon-chevron-up right"></span>
						</h4>
					</div>
					<!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 -->
					<div id="collapseListGroup1" class="panel-collapse collapse in"
						role="tabpanel" aria-labelledby="collapseListGroupHeading1">
						<ul class="nav nav-pills" >
							<li class="li_tab">
								<a href="#home" role="tab" data-toggle="tab">分组项1-1</a>
							</li>
							<li class="li_tab">
								<a href="#Java" role="tab" data-toggle="tab">分组项1-2</a>
							</li>
							<li class="li_tab">
								<a href="#JavaScript" role="tab" data-toggle="tab">分组项1-3</a>
							</li>
							<li class="li_tab">
								<a href="#HTML" role="tab" data-toggle="tab">分组项1-4</a>
							</li >
							<li class="li_tab">
								<a href="#home" role="tab" data-toggle="tab">分组项1-5</a>
							</li>
							<li class="li_tab">
								<a href="#Java" role="tab" data-toggle="tab">分组项1-6</a>
							</li>
							<li class="li_tab">
								<a href="#JavaScript" role="tab" data-toggle="tab">分组项1-7</a>
							</li>
							<li class="li_tab">
								<a href="#HTML" role="tab" data-toggle="tab">分组项1-8</a>
							</li >
							<li class="li_tab">
								<a href="#home" role="tab" data-toggle="tab">分组项1-9</a>
							</li>
							<li class="li_tab">
								<a href="#Java" role="tab" data-toggle="tab">分组项1-10</a>
							</li>
						</ul>
					</div>
				</div>
				<!--panel end-->
				<div class="panel panel-primary leftMenu">
					<div class="panel-heading" id="collapseListGroupHeading2"
						data-toggle="collapse" data-target="#collapseListGroup2"
						role="tab">
						<h4 class="panel-title">
							分组2 <span class="glyphicon glyphicon-chevron-down right"></span>
						</h4>
					</div>
					<div id="collapseListGroup2" class="panel-collapse collapse"
						role="tabpanel" aria-labelledby="collapseListGroupHeading2">
						<ul class="nav nav-pills">
							<li class="li_tab">
								<a href="#home" role="tab" data-toggle="tab">分组项2-1</a>
							</li>
							<li class="li_tab">
								<a href="#Java" role="tab" data-toggle="tab">分组项2-2</a>
							</li>
							<li class="li_tab">
								<a href="#JavaScript" role="tab" data-toggle="tab">分组项2-3</a>
							</li>
							<li class="li_tab">
								<a href="#HTML" role="tab" data-toggle="tab">分组项2-4</a>
							</li >
							<li class="li_tab">
								<a href="#home" role="tab" data-toggle="tab">分组项2-5</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="tab-content">  
		  <div role="tabpanel" class="tab-pane active" id="home">Home</div>  
		  <div role="tabpanel" class="tab-pane" id="Java">Java</div>  
		  <div role="tabpanel" class="tab-pane" id="JavaScript">JavaScript</div>  
		  <div role="tabpanel" class="tab-pane" id="JQuery">JQuery</div>  
		  <div role="tabpanel" class="tab-pane" id="HTML">HTML</div>  
		  <div role="tabpanel" class="tab-pane" id="CSS">CSS</div>  
		</div>
	</div>
	<script>
	
        $(function(){
            $(".panel-heading").click(function(e){
                /*切换折叠指示图标*/
                $(this).find("span").toggleClass("glyphicon-chevron-down");
                $(this).find("span").toggleClass("glyphicon-chevron-up");
            });
        });
        
    </script>

</body>
</html>

　　

通过 data 属性：

            添加 data-toggle="tab"或 data-toggle="pill"到导航区ul中来启用标签页。

            添加 nav 和nav-tabs类到导航区 ul中，将会应用 Bootstrap标签样式，添加nav 和 nav-pills类到导航区ul中，将会应用 Bootstrap胶囊式样式。

            这样你直接引入 bootstrap.js 就能用了，但你必须为当中某个标签页的<li>元素指定"active"类名(active：激活当前对象)

 

 注：如果你想用JavaScript明确指定哪个面板被激活，你要对它的某个标签页的链接使用tab("show")方法，

        而不是作用于它的容器上。并且如果使用javascript实现这种导航内容的切换，a标签中无须再添加data-toggle='tab'

 

仿tab：

<!DOCTYPE html>
<html>
<head>
<title>tab_right.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=gbk">
<!-- Bootstrap3.3.5 CSS -->
<link rel="stylesheet"
	href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script
	src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script
	src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.panel-group {
	max-height: 770px;
	overflow: auto;
}

.leftMenu {
	margin: 10px;
	margin-top: 5px;
}

.leftMenu .panel-heading {
	font-size: 14px;
	padding-left: 20px;
	height: 36px;
	line-height: 36px;
	color: white;
	position: relative;
	cursor: pointer;
} /*转成手形图标*/
.leftMenu .panel-heading span {
	position: absolute;
	right: 10px;
	top: 12px;
}

.leftMenu .menu-item-left {
	padding: 2px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 6px;
}

.leftMenu .menu-item-left:hover {
	background: #C4E3F3;
	border: 1px solid #1E90FF;
}
</style>
</head>

<body>
	<div class="row">
		<div class="col-md-2">
			<div class="panel-group table-responsive" role="tablist">
				<div class="panel panel-primary leftMenu">
					<!-- 利用data-target指定要折叠的分组列表 -->
					<div class="panel-heading" id="collapseListGroupHeading1"
						data-toggle="collapse" data-target="#collapseListGroup1"
						role="tab">
						<h4 class="panel-title">
							分组1 <span class="glyphicon glyphicon-chevron-up right"></span>
						</h4>
					</div>
					<!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 -->
					<div id="collapseListGroup1" class="panel-collapse collapse in"
						role="tabpanel" aria-labelledby="collapseListGroupHeading1">
						<ul class="list-group">
							<li class="list-group-item" >
								<!-- 利用data-target指定URL -->
								<button class="menu-item-left" data-target="test2.html" οnclick="menucheck(0)">
									<span class="glyphicon glyphicon-triangle-right"></span>分组项1-1
								</button>
							</li>
							<li class="list-group-item">
								<button class="menu-item-left" οnclick="menucheck(1)">
									<span class="glyphicon glyphicon-triangle-right"></span>分组项1-2
								</button>
							</li>
							<li class="list-group-item">
								<button class="menu-item-left" οnclick="menucheck(2)">
									<span class="glyphicon glyphicon-triangle-right"></span>分组项1-3
								</button>
							</li>
							<li class="list-group-item">
								<button class="menu-item-left" οnclick="menucheck(3)">
									<span class="glyphicon glyphicon-triangle-right"></span>分组项1-4
								</button>
							</li>
							<li class="list-group-item">
								<button class="menu-item-left" οnclick="menucheck(4)">
									<span class="glyphicon glyphicon-triangle-right"></span>分组项1-5
								</button>
							</li>
							<li class="list-group-item">
								<button class="menu-item-left" οnclick="menucheck(5)">
									<span class="glyphicon glyphicon-triangle-right"></span>分组项1-6
								</button>
							</li>
							<li class="list-group-item">
								<button class="menu-item-left" οnclick="menucheck(6)">
									<span class="glyphicon glyphicon-triangle-right"></span>分组项1-7
								</button>
							</li>
							<li class="list-group-item">
								<button class="menu-item-left" οnclick="menucheck(7)">
									<span class="glyphicon glyphicon-triangle-right"></span>分组项1-8
								</button>
							</li>
							<li class="list-group-item">
								<button class="menu-item-left" οnclick="menucheck(8)">
									<span class="glyphicon glyphicon-triangle-right"></span>分组项1-9
								</button>
							</li>
							<li class="list-group-item">
								<button class="menu-item-left" οnclick="menucheck(9)">
									<span class="glyphicon glyphicon-triangle-right"></span>分组项1-10
								</button>
							</li>
							<li class="list-group-item">
								<button class="menu-item-left" οnclick="menucheck(10)">
									<span class="glyphicon glyphicon-triangle-right"></span>分组项1-11
								</button>
							</li>
						</ul>
					</div>
				</div>
				<!--panel end-->
				<div class="panel panel-primary leftMenu">
					<div class="panel-heading" id="collapseListGroupHeading2"
						data-toggle="collapse" data-target="#collapseListGroup2"
						role="tab">
						<h4 class="panel-title">
							分组2 <span class="glyphicon glyphicon-chevron-down right"></span>
						</h4>
					</div>
					<div id="collapseListGroup2" class="panel-collapse collapse"
						role="tabpanel" aria-labelledby="collapseListGroupHeading2">
						<ul class="list-group">
							<li class="list-group-item">
								<button class="menu-item-left" οnclick="menucheck(11)">
									<span class="glyphicon glyphicon-triangle-right"></span>分组项2-1
								</button>
							</li>
							<li class="list-group-item">
								<button class="menu-item-left" οnclick="menucheck(12)">
									<span class="glyphicon glyphicon-triangle-right"></span>分组项2-2
								</button>
							</li>
							<li class="list-group-item">
								<button class="menu-item-left" οnclick="menucheck(13)">
									<span class="glyphicon glyphicon-triangle-right"></span>分组项2-3
								</button>
							</li>
							<li class="list-group-item">
								<button class="menu-item-left" οnclick="menucheck(14)">
									<span class="glyphicon glyphicon-triangle-right"></span>分组项2-4
								</button>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="tab-content">  
		  <div role="tabpanel" class="tab-pane active" id="home">Home</div>  
		  <div role="tabpanel" class="tab-pane" id="Java">Java</div>  
		  <div role="tabpanel" class="tab-pane" id="JavaScript">JavaScript</div>  
		  <div role="tabpanel" class="tab-pane" id="JQuery">JQuery</div>  
		  <div role="tabpanel" class="tab-pane" id="HTML">HTML</div>  
		  <div role="tabpanel" class="tab-pane" id="CSS">CSS</div>  
		</div>
	</div>
	<script>
		function menucheck(i){
		if(i==0){
			$("#home").show();
			$("#Java").hide();
			$("#JavaScript").hide();
			$("#JQuery").hide();
			$("#HTML").hide();
			$("#CSS").hide();
		}else if(i==1){
			$("#home").hide();
			$("#Java").show();
			$("#JavaScript").hide();
			$("#JQuery").hide();
			$("#HTML").hide();
			$("#CSS").hide();
		}else if(i==2){
			$("#home").hide();
			$("#Java").hide();
			$("#JavaScript").show();
			$("#JQuery").hide();
			$("#HTML").hide();
			$("#CSS").hide();
		}else if(i==3){
			$("#home").hide();
			$("#Java").hide();
			$("#JavaScript").hide();
			$("#JQuery").show();
			$("#HTML").hide();
			$("#CSS").hide();
		}else if(i==4){
			$("#home").hide();
			$("#Java").hide();
			$("#JavaScript").hide();
			$("#JQuery").hide();
			$("#HTML").show();
			$("#CSS").hide();
		}else if(i==5){
			$("#home").hide();
			$("#Java").hide();
			$("#JavaScript").hide();
			$("#JQuery").hide();
			$("#HTML").hide();
			$("#CSS").show();
		}
	}
	
        $(function(){
            $(".panel-heading").click(function(e){
                /*切换折叠指示图标*/
                $(this).find("span").toggleClass("glyphicon-chevron-down");
                $(this).find("span").toggleClass("glyphicon-chevron-up");
            });
        });
        
    </script>

</body>
</html>

　　

 

 

转载于:https://www.cnblogs.com/SEVEN-wkq/p/6957182.html

ddem89353
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于Bootstrap实现tab标签切换效果
09-02
主要为大家详细介绍了基于Bootstrap实现tab标签切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
5.6 Bootstrap 标签页(Tab)插件
最新发布
梁辰兴的博客
07-24 1907
注意：如果您想要单独引用该插件的功能，那么您需要引用 tab.js。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。.$().tab：该方法可以激活标签页元素和内容容器。下面的实例演示了标签页（Tab）插件方法 .tab 的用法。下面的实例演示了标签页（Tab）插件事件的用法。
Bootstrap 导航元素（ tab导航）标签页
雪锋的笔记
09-25 7172
1、基本的导航元素：标签导航。基于ul、li而来，给ul添加class="nav nav-tabs" 即可。选中的li添加class="active"即可。 <p>标签式的导航菜单</p> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a&gt..
bootstrap中的标签页(tabs)
yaly200的博客
09-20 1250
Togglable tabstab.js Example tabs Add quick, dynamic tab functionality to transition through pane...
基于Bootstrap的标签页组件bootstrap-tab
极客神殿
08-17 7877
bootstrap-tab组件是对原生的bootstrap-tab组件的封装，方便开发者更方便地使用，主要包含以下功能： tab页初始化 关闭tab页 新增tab 显示tab页 获取tab页ID 使用 Step1 ：引入样式 1 2 3 4 Step2：引入脚本 1 2 3 Step3：使用 (&amp;amp;amp;quot;#tabContai...
浅析Bootstrap中Tab（标签页）的使用方法
热门推荐
极客神殿
10-23 2万+
Bootstrap 导航元素使用相同的标记和基类，改变修饰的class，可以在不同的样式间进行切换 如&amp;quot;.nav-pills&amp;quot;（胶囊式导航）与 “.nav-tabs” （标签式导航） 创建一个标签式的导航菜单： 以一个带有 class .nav 的无序列表开始。 添加 class .nav-tabs。 下面的实例演示了这点： Home Profile Messages Sett...
bootstrap 多层tab标签实现
01-01
bootstrap 多层tab标签实现
bootstrap-closable-tab可实现关闭的tab标签页插件
10-14
主要为大家详细介绍了bootstrap-closable-tab可实现关闭的tab标签页插件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap编辑的tab标签切换
12-25
bootstrap编辑的tab标签切换 可用 简单 供参考
bootstrap的tabs标签页：实现a页面指定的tab，点击more，跳去b页面指定的tab
电鳗的博客
05-16 1万+
如图。 实现目标： a页面的tab1标签页中点击more 跳去b页面的tab1 这里为什么是more跳过去的呢，因为tab nav上面的tab1，tab2，tab3，是用来对应自己在同个页面的标签页的。 使用框架： bootstrap的v3版本的tabs标签页
bootstrap-closable-tab.js tab标签页扩展之关闭全部和关闭其他
03-15
bootstrap-closable-tab.js扩展关闭全部和关闭其他,tab扩展增加、关闭
Bootstrap制作胶囊标签页
yangaoyuan1999的博客
12-15 1096
胶囊标签页： 1.使用一个完整的标签页可以分为页头选择卡和内容两部分 2.页头使用ul标签在ul标签中能够添加.nav和.nav-tabs类，将会应用Bootstrap标签页样式， 添加.nav和.nav-pills类会应用胶囊标签样式 3.需要几个标签项就添加几个li 4.在li标签中添加a标签，a标签的href的值直接跟标签页下面的内容div的id关联，十分重要 5.在a标签中添加data-toggle="tab"或data-toggle="pill" <!DOCTYPE html> &l
Web07（Bootstrap介绍、Bootstrap三大组成部分）
么古的博客
05-14 2146
Part01：Bootstrap介绍 1、Bootstrap简介： Bootstrap是目前最受欢迎的基于HTML、CSS和JS的前端框架，用于开发响应式布局，移动设备优先的WEB项目 2、Bootstrap使用步骤： 导入jQuery文件 导入bootstrap.css文件 导入bootstrap.js文件 创建视口 * <meta name=“viewport” content=“...
bootstrap下拉框式标签页
weixin_33918357的博客
06-07 284
<ul id="myTab" class="nav nav-tabs"> <li class="active"> <a href="#home" data-toggle="tab"> 菜鸟教程 </a> </li> <li class="dropdown"> <a ...
bootstrap源码学习与示例：bootstrap-tab
weixin_33957648的博客
12-22 84
切换卡或叫标签页组件。它与scrollspy组件一样，分为两部分，触发区与面板区。触发区用于绑定点击事件，切换对应的面板。 切换区为一个UL列表，要求UL带"nav nav-tabs"或"nav nav-pills"这两种类名。li下的标签要求有 data-toggle="tab"属性，你可以通过data-target或href指定对应的面板。 面板区要求就相对宽松些，容器要求带"tab-co...
Bootstrap 标签页（Tab）插件
美奇软件开发工作室
04-15 575
标签页（Tab）在 Bootstrap 导航元素介绍过。通过结合一些 data 属性，您可以轻松地创建一个标签页界面。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。如果您想要单独引用该插件的功能，那么您需要引用 tab.js。或者，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。用法您可以通过以下两种方式启用标签页：通过 data...
bootstrap标签页（tab）
小巷陌影
02-07 824
Bootstrap 标签页（Tab）插件 标签页（Tab）在 Bootstrap 导航元素 一章中介绍过。通过结合一些 data 属性，您可以轻松地创建一个标签页界面。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。 用法 您可以通过以下两种方式启用标签页： 通过 data 属性：您需要添加 data-toggle="tab" 或 da
QiYuAdmin-bootstrap.addtabs美化（SpringBoot实战）
zqy_zq_zxl的博客
04-10 4465
简介之前发现了一个插件bootstrap-addtabs，一直收藏着，之前看的时候是v1版本的，现在更新到了v2.0版本，那就开始用吧，已经有人写出来了，而且更新迭代到了2.0版本，不重复造轮子，重复造轮子还不一定比别人的好，毕竟别人的已经经过了考验： 美化页面成果 bootstrap-addtabs介绍 bootstrap-addtabs集成 bootstrap-addtabs样式调整 页面成果
bootstrap动态添加Tab标签页
05-26
要动态添加 Bootstrap 的 Tab 标签页，需要使用 JavaScript 和 jQuery。以下是一个简单的示例： ```html <!-- HTML 结构 --> <a class="nav-link active" data-toggle="tab" href="#home">Home ...

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值