Question

我需要帮助管理选项卡面板下的两个不同的转盘。我在两个标签链接下使用后轮播短信码。因此每个轮播都应出现在标签链接下。我正在使用WordPress插件制作后轮播名称Responsive Posts Carousel。最初使用此代码作为标签。

问题在于，最初活动标签正确显示第一个轮播。但是当我点击第二个标签时，它会显示带有SPARK_LOCATION/spark-submit --verbose --master yarn-cluster --num-executors 15 --conf spark.driver.cores=3 ....... --conf spark.driver.extraJavaOptions="-Xss10m -XX:MaxPermSize=1024M " --conf spark.executor.extraJavaOptions="-Xss10m -XX:MaxPermSize=512M " .....的第二个轮播。

这是the page link。您将看到两个选项卡部分名称“Home”和“Profile”。

width:0px

.nav-tabs { border-bottom: 2px solid #DDD; }
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
    .nav-tabs > li > a { border: none; color: #666; }
        .nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #4285F4 !important; background: transparent; }
        .nav-tabs > li > a::after { content: ""; background: #4285F4; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
    .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1); }
.tab-nav > li > a::after { background: #21527d none repeat scroll 0% 0%; color: #fff; }
.tab-pane { padding: 15px 0; }
.tab-content{padding:20px}

.card {background: #FFF none repeat scroll 0% 0%; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); margin-bottom: 30px; }

Answer 1

使用此css

<style>
 .tab-content > .tab-pane {
display:  block !important;
order: 1;
width:  100%;
opacity: 0;
}

.tab-content {
 display:  flex;
 width:  100%;
 flex-wrap:  wrap;
  } 
   .tab-content > .tab-pane.active {
    order: 0;
   position:  absolute;
   opacity:  1;
}
 </style>

如何在标签面板中使用两个转盘？

1 个答案: