tab标签页与动态切换,点击图标显示整个页面,出现收回图标一行字体显示图标

Posted huiminxu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了tab标签页与动态切换,点击图标显示整个页面,出现收回图标一行字体显示图标相关的知识,希望对你有一定的参考价值。


.help-box {
font-size: 1.2rem;
}

.help-box .main dt {
font-size: 1.6rem;
font-weight: bold;
}

.help-box .main dd {
line-height: 2rem;
}

.help-box .main ul {
padding-left: 2em;
margin-bottom: 8px;
}

.help-box .main ul li {
margin-bottom: 5px;
}

.help-box .main p {
text-indent: 2rem;
}

.help-box .main li i {
margin-right: 6px;
}
.help-box .list-group{width:100%;}
.help-box .list-group li.active .list-group-item {

}

.help-box .list-group li {
margin-bottom: 0;
}
.helpcentertop{
background-color: #f4f4e9;
margin-bottom: 30px;
width:100%;
}
.helpcentertop img{
display: block;
width:100%;
height:auto;
margin:0 auto;


}
.helpcentercont{
padding:0 11.5%;
overflow: hidden;
margin-bottom: 120px;

}
.helpcentercont .aside{
float: left;
height:100%;
padding-bottom: 139px;
background-color: #f6f6f6;


}

.helpcentercont .aside li{
padding:11px 33px 13px 22px;
font-size:14px;
line-height:14px;
color: #2f2e2e;
background-color: #f6f6f6;

}
.helpcentercont .aside li:hover{

}

.helpcentercont .aside li.active{

background-color: #fff;
}
.helpcentercont .aside li:hover a, .helpcentercont .aside li.active a{
color: #48b84a;
}
.helpcentercont .aside li.guide{
padding:16px 27px 12px 19px;
font-size:16px;
}

.helpcont{
float: left;
width: 86%;
margin-left: 12px;
background-color: #f6f6f6;
padding:0px 27px;
}
.helpcont h3:hover{
color: #48b84a;
cursor: pointer;
}
.helpcont h3{
float: left;
font-size:16px;
color: #787674;
font-weight:bold;
margin: 25px 0px 17px 0px;


}
.toggleColor{
color: #48b84a !important;
cursor: pointer;
}
.helpcont p{
position: relative;
clear: both;
font-size:14px;
line-height:20px;
color: #575a5d;
font-weight:normal;
margin:0px;
padding: 0px 20px 20px 0px;
border-bottom: 1px solid #d2d2d2;


}
.helpcont p i{
position: absolute;
font-size:20px;
right:0px;
cursor: pointer;

}
.helpcont p i:hover{
color: #48b84a;
}
.helpcont p.last{
border-bottom: none;
}
.addDefault{
height: 35px;
line-height: 28px !important;
overflow: hidden;

}









//ftl
<#import "/resource/common_html_front.ftl" as html>
<#import "/indexMenu.ftl" as menu>
<#import "/account/accountMenu.ftl" as accountMenu>
<@html.htmlBase>
<@menu.menu selectMenu=""/>
<!------灰色区域------>
<div class="helpcentertop">
<img src="../resource/images/helpcenter/helpcenter.png" >
</div>
<div class="helpcentercont clearfix">
<ul class="aside">
<li class="guide">
服务指南
</li>
<li class="active">
<a href="#customize" data-toggle="tab" role="tab" aria-controls="customize">定制问题</a>
</li>
<li>
<a href="#uploadques" data-toggle="tab" role="tab" aria-controls="uploadques">上传问题</a>
</li>
<li>
<a href="#memberques" data-toggle="tab" role="tab" aria-controls="memberques">会员问题</a>
</li>
</ul>
<div class="tab-content helpcont">
<div class="tab-pane fade in active" id="customize">
<h3>用户该如何定制?</h3>
<p data-height="40"><i class="iconfont shows">&#xe618;</i><i class="iconfont shou">&#xe617;</i>定制页面选择设计师→沟通确认详细需求、交稿时间及价格等信息→点击付款链接付款→设计师完成作品后下载→若不满意,可以推迟订单一次,设计师重新设计上传最新作品。</p>
<h3>设计作品达不到理想效果怎么办?</h3>
<p data-height="60"><i class="iconfont shows">&#xe618;</i><i class="iconfont shou">&#xe617;</i>在约定需求不变的前提下,首先,请您特别重视与设计师沟通,只要在订单过程中,您都可以直接联系设计师,针对进展、目标等进行沟通。在第一次下载设计师的定制作品后,若不满意,可以推迟订单一次,设计师重新设计上传最新作品。若还未满意,申请仲裁,客服将介入调解。若设计师为责任方,则平台将款项退还客户,但需据情况扣除一定的服务费;若客户为责任方,则不予退款。</p>
<h3>设计师如何接单,完成定制任务?</h3>
<p data-height="200"><i class="iconfont shows">&#xe618;</i><i class="iconfont shou">&#xe617;</i>①用户定制页面选择设计师。<br/>
②双方沟通确认详细需求、交稿时间及价格等信息。<br/>
③设计师选择个人中心→上传作品→上传定制服务,将定制类型、定制价格、完成期限等填写完毕,确认提交。<br/>
④确认提交后点击“发送订单”按钮,将自动复制付款链接到剪切板,设计师然后发送付款链接给用户。<br/>
⑤用户付款后,设计师即可开始作品设计。<br/>
⑥作品完成后,设计师需在约定的完成期限前,在“我的定制”中完成作品上传。<br/>
⑦若用户第一次不满意,选择了“推迟”,设计师将要根据用户需求进行作品修改,然后再次进行作品上传。<br/>
⑧用户确认订单,订单完成。<br/>
⑨若定制过程中产生纠纷,设计师也可申请仲裁,客服将介入调解。若设计师为责任方,则平台将款项退还客户,但需据情况扣除一定的服务费;若客户为责任方,则不予退款。</p>
<h3>设计师如何提现?</h3>
<p class="last" data-height="20"><i class="iconfont shows">&#xe618;</i><i class="iconfont shou">&#xe617;</i>设计师完成定制订单后,可以进入个人中心→我的收入查看。设计师的总收入累计超过200元后方可提现。</p>
</div>
<div class="tab-pane" id="uploadques">
<h3>我不是设计师也可以上传吗?</h3>
<p data-height="20"><i class="iconfont shows">&#xe618;</i><i class="iconfont shou">&#xe617;</i>柚墨模板网站的所有注册用户都可以进行作品上传,入口:个人中心→上传作品。</p>

<h3>我可以上传什么作品?</h3>
<p data-height="40"><i class="iconfont shows">&#xe618;</i><i class="iconfont shou">&#xe617;</i>Office模板(PPT模板、Excel模板和Word模板)、AE模板和表情包。<br/>为了提高您的模板通过率,在进行模板上传时,请仔细阅读相关模板上传规范。</p>

<h3>我为什么要在柚墨上传作品?</h3>
<p data-height="40"><i class="iconfont shows">&#xe618;</i><i class="iconfont shou">&#xe617;</i>柚墨网站提供给用户的不仅是一个资源下载平台,还是一个可供用户上传模板获取收益的交易平台,且目前柚墨网站不收取任何手续费,最大程度保证的用户的权益。</p>

<h3>上传模板出售获得的收入如何提现?</h3>
<p class="last" data-height="20"><i class="iconfont shows">&#xe618;</i><i class="iconfont shou">&#xe617;</i>您可以进入个人中心→我的收入查看。当出售模板的总收入累计超过200元后方可提现。</p>


</div>
<div class="tab-pane" id="memberques">

<h3>什么是柚墨会员?</h3>
<p data-height="20"><i class="iconfont shows">&#xe618;</i><i class="iconfont shou">&#xe617;</i>柚墨会员是柚墨网站推出的一款模板包月服务,您只需支付每月16.8元,即可享受全场模板免费下载。</p>


<h3>会员有什么特权?</h3>
<p data-height="20"><i class="iconfont shows">&#xe618;</i><i class="iconfont shou">&#xe617;</i>柚墨会员可享有:全场模板免费下载(除新品模板外)、新品模板专享5折特权、尊贵会员身份头衔、专属客服等。 </p>


<h3>柚墨会员怎样购买?</h3>
<p class="last" data-height="60"><i class="iconfont shows">&#xe618;</i> <i class="iconfont shou">&#xe617;</i>会员可以通过微信和支付宝方式购买开通。<br/>
用户进入柚墨网站会员专区,点击柚会员→立即充值,会弹出相应的会员购买页面<br/>
一旦开通柚墨会员服务,不提供退款,请谅解!</p>

</div>
</div>
</div>

<link rel="stylesheet" href="${basepath}/resource/css2/help.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function () {
$(".helpcont h3").click(function() {
$(this).toggleClass("toggleColor");}
);
$(".helpcont p").each(function(i,ele){
if($(ele).data("height")===20){
$(ele).find("i").hide();
}else{
console.log("aaa");
$(ele).find("i.shou").hide();
$(ele).find("i.shows").show();
$(ele).addClass("addDefault");

}
}
);
$(".helpcont").on("click","h3",function(){
if( $(this).next("p").data("height")===20){
$(this).next("p").find("i").hide();
}else{
$(this).next("p").toggleClass("addDefault");
$(this).next("p").find("i.shows").fadeToggle();
$(this).next("p").find("i.shou").fadeToggle();
}

}

);

$(".helpcont").on("click","i",function(){
if( $(this).closest("p").data("height")===20){
$(this).closest("p").find("i").hide();
}else{
$(this).closest("p").toggleClass("addDefault");
$(this).closest("p").find("i.shows").fadeToggle();
$(this).closest("p").find("i.shou").fadeToggle();
}

}

);

/* var ele=[$("#customize p"),$("#uploadques p"),$("#memberques p")];

var i=0;
(function() {
ele[i].click(
function () {
console.log(this);
console.log($(this).height());
if ($(this).height() === 20) {
$(this).find("i").hide();
}
}
);
})(i);
if($("a[href=‘#uploadques‘]").closest("li").hasClass("active")){
console.log("aaa");
i=1;
$(ele[1]).trigger(‘click‘);
}
if($("a[href=‘#memberques‘]").closest("li").hasClass("active")){
i=2;
$(ele[2]).trigger(‘click‘);
}
if($("a[href=‘#customize‘]").closest("li").hasClass("active")){
i=0;
$(ele[0]).trigger(‘click‘);
}




*/

});

</script>
</@html.htmlBase>

以上是关于tab标签页与动态切换,点击图标显示整个页面,出现收回图标一行字体显示图标的主要内容,如果未能解决你的问题,请参考以下文章

处理点击tab标签时Echarts图片显示不全的问题

vue项目使用elementUI中Tabs标签页点击切换tab-click发起网络请求数据

jQuery怎么实现tab页切换效果

如何使LayUI的Tab选项卡标签在切换时,自动刷新

如何设置显示器色彩管理?

ASP.NET中后台不能动态添加前台tab页面