代码之家 › 专栏 › 技术社区 › Razvan Zamfir

对选项卡式内容的“不透明度”属性使用CSS3转换无效

css html jquery javascript

Razvan Zamfir · 技术社区 · 7 年前

我正在HTML5、CSS3和jQuery中开发一个简单的选项卡式内容框。

很好用除了我无法使用CSS逐渐淡入内容过渡和 不透明度 .代码如下:

$("#filters_switch").on("click", "li", function() {
    $('#filters_switch li').removeClass('tab_selected');
    $(this).addClass('tab_selected');
    $('#filters_content > div').removeClass('tab_selected');
    $('#' + $(this).find('a').data('href')).addClass('tab_selected');
});

#filters_switch {
  padding: 0 4px;
  margin-top: 10px;
  border-bottom: 1px solid #d0d0d0;
  text-align: center;
}
#filters_switch li {
  display: block;
  float: left;
  min-width: 200px;
  padding: 0 1px;
  margin-bottom: -1px;
}
#filters_switch li.tab_selected a {
  color: #000;
  background: #fff;
  border-bottom: 1px solid #fff;
}
#filters_switch a {
  display: block;
  text-decoration: none;
  padding: 3px 6px;
  font-size: 12px;
  font-weight: bold;
  background: #f2f2f2;
  color: #962b27;
  border: 1px solid #d0d0d0;
  border-radius: 8px 8px 0 0;
}
#filters_content .tab {
  padding: 0 10px;
  display: none;
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
#filters_content .tab.tab_selected {
  display: block;
  opacity: 1;
}

#filters_content .tab h2 {
  font-size: 18px;
  font-weight: bold;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="filters_switch" class="tabnav clearfix">
  <li id="filters_standard_link" class="tabnav_li tab_selected">
    <a class="tabnavlink" href="#" data-href="filters_standard">Tab 1</a>
  </li>
  <li id="filters_advanced_link" class="tabnav_li">
    <a class="tabnavlink" href="#" data-href="filters_advanced">Tab 2</a>
  </li>
</ul>

<div id="filters_content" class="tabs">
    <div id="filters_standard" data-id="filters_standard" class="tab tab_selected">
      <h2>Lorem ipsum dolor sit amet</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse odit sapiente, odio deleniti asperiores iusto animi hic sint voluptate incidunt.</p>
    </div>
    
    <div id="filters_advanced" data-id="filters_advanced" class="tab">
      <h2>Esse odit sapiente odio deleniti</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse odit sapiente, odio deleniti asperiores iusto animi hic sint voluptate incidunt.</p>
    </div>
</div>

因为转换不能用于 display 属性,我在 opacity ,希望首先显示内容,但 0不透明度 ,然后使用不透明度 慢速地 设为1。

然而,这并没有发生。为什么?我如何解决这个问题?

4 回复 | 直到 7 年前

Scaramouche 7 年前

正如您所说,您不能将CSS转换应用于 display ,因此,请尝试使用 .fadeIn() 和 .fadeOut() 同时绝对定位卡舌。

你好

$("#filters_switch").on("click", "li", function() {
   if(!$(this).hasClass('tab_selected')){
   $(this).addClass('tab_selected').siblings('li').removeClass('tab_selected');
    
    $('#' + $(this).find('a').data('href')).fadeIn('slow').siblings('div.tab').fadeOut('slow');
    }
});

#filters_switch {
  padding: 0 4px;
  margin-top: 10px;
  border-bottom: 1px solid #d0d0d0;
  text-align: center;
}
#filters_switch li {
  display: block;
  float: left;
  min-width: 200px;
  padding: 0 1px;
  margin-bottom: -1px;
}
#filters_switch li.tab_selected a {
  color: #000;
  background: #fff;
  border-bottom: 1px solid #fff;
}
#filters_switch a {
  display: block;
  text-decoration: none;
  padding: 3px 6px;
  font-size: 12px;
  font-weight: bold;
  background: #f2f2f2;
  color: #962b27;
  border: 1px solid #d0d0d0;
  border-radius: 8px 8px 0 0;
}
#filters_content .tab {
  padding: 0 10px;
  display: none;
 
  position: absolute;
}
#filters_content .tab.tab_selected {
  display: block;
  //opacity: 1;
}

#filters_content .tab h2 {
  font-size: 18px;
  font-weight" bold;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="filters_switch" class="tabnav clearfix">
  <li id="filters_standard_link" class="tabnav_li tab_selected">
    <a class="tabnavlink" href="#" data-href="filters_standard">Tab 1</a>
  </li>
  <li id="filters_advanced_link" class="tabnav_li">
    <a class="tabnavlink" href="#" data-href="filters_advanced">Tab 2</a>
  </li>
</ul>

<div id="filters_content" class="tabs">
    <div id="filters_standard" data-id="filters_standard" class="tab tab_selected">
      <h2>Lorem ipsum dolor sit amet</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse odit sapiente, odio deleniti asperiores iusto animi hic sint voluptate incidunt.</p>
    </div>
    
    <div id="filters_advanced" data-id="filters_advanced" class="tab">
      <h2>Esse odit sapiente odio deleniti</h2>
      <p>Lorem ipsum dol odit sapiente, odio deleniti asperiores iusto animi hic sint voluptate incidunt.</p>
    </div>
</div>

Zuber 7 年前

您需要修改 jQuery 和 css .使用 fadeIn 和 fadeOut ,你可以实现你想要的

$("#filters_switch").on("click", "li", function() {
    var toggleSection = $(this).attr('data-toggle');
    $('.tabnav li').removeClass('tab_selected');
    $(this).addClass('tab_selected');
    $('#filters_content > div').fadeOut(250); 
    $("[data-tab="+toggleSection+"]").delay(300).fadeIn(250);
});

#filters_switch {
  padding: 0 4px;
  margin-top: 10px;
  border-bottom: 1px solid #d0d0d0;
  text-align: center;
}
#filters_switch li {
  display: block;
  float: left;
  min-width: 200px;
  padding: 0 1px;
  margin-bottom: -1px;
}
#filters_switch li.tab_selected a {
  color: #000;
  background: #fff;
  border-bottom: 1px solid #fff;
}
#filters_switch a {
  display: block;
  text-decoration: none;
  padding: 3px 6px;
  font-size: 12px;
  font-weight: bold;
  background: #f2f2f2;
  color: #962b27;
  border: 1px solid #d0d0d0;
  border-radius: 8px 8px 0 0;
}
#filters_content .tab {
  padding: 0 10px;
  /* display: none; */
  /* opacity: 0; */
  /* -webkit-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s; */
}
#filters_content .tab.tab_selected {
  display: block;
  /* opacity: 1; */
}

#filters_content .tab h2 {
  font-size: 18px;
  font-weight:bold;
}
#filters_content > div {
  display: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="filters_switch" class="tabnav clearfix">
  <li id="filters_standard_link" class="tabnav_li tab_selected" data-toggle="section-one">
    <a class="tabnavlink" href="#" data-href="filters_standard">Tab 1</a>
  </li>
  <li id="filters_advanced_link" class="tabnav_li" data-toggle="section-two">
    <a class="tabnavlink" href="#" data-href="filters_advanced">Tab 2</a>
  </li>
</ul>

<div id="filters_content" class="tabs">
    <div id="filters_standard" data-id="filters_standard" data-tab="section-one" class="tab tab_selected">
      <h2>Lorem ipsum dolor sit amet</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse odit sapiente, odio deleniti asperiores iusto animi hic sint voluptate incidunt.</p>
    </div>
    
    <div id="filters_advanced" data-id="filters_advanced" class="tab" data-tab="section-two">
      <h2>Esse odit sapiente odio deleniti</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse odit sapiente, odio deleniti asperiores iusto animi hic sint voluptate incidunt.</p>
    </div>
</div>

工作小提琴 here

Renzo Calla 7 年前

转换不会应用于某些属性,包括“显示”属性,因此您可以使用、z索引和“绝对位置”来解决此问题,如示例所示。。

$("#filters_switch").on("click", "li", function() {
    $('#filters_switch li').removeClass('tab_selected');
    $(this).addClass('tab_selected');
    $('#filters_content > div').removeClass('tab_selected');
    $('#' + $(this).find('a').data('href')).addClass('tab_selected');
});

#filters_switch {
  padding: 0 4px;
  margin-top: 10px;
  border-bottom: 1px solid #d0d0d0;
  text-align: center;
}
#filters_switch li {
  display: block;
  float: left;
  min-width: 200px;
  padding: 0 1px;
  margin-bottom: -1px;
}
#filters_switch li.tab_selected a {
  color: #000;
  background: #fff;
  border-bottom: 1px solid #fff;
}
#filters_switch a {
  display: block;
  text-decoration: none;
  padding: 3px 6px;
  font-size: 12px;
  font-weight: bold;
  background: #f2f2f2;
  color: #962b27;
  border: 1px solid #d0d0d0;
  border-radius: 8px 8px 0 0;
}
#filters_content {
  position:relative;
}
#filters_content .tab {
  padding: 0 10px;
  z-index: 0;
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
  
  position: absolute;
    top: 0;
}
#filters_content .tab.tab_selected {
  z-index: 1;
  opacity: 1;
}

#filters_content .tab h2 {
  font-size: 18px;
  font-weight" bold;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="filters_switch" class="tabnav clearfix">
  <li id="filters_standard_link" class="tabnav_li tab_selected">
    <a class="tabnavlink" href="#" data-href="filters_standard">Tab 1</a>
  </li>
  <li id="filters_advanced_link" class="tabnav_li">
    <a class="tabnavlink" href="#" data-href="filters_advanced">Tab 2</a>
  </li>
</ul>

<div id="filters_content" class="tabs">
    <div id="filters_standard" data-id="filters_standard" class="tab tab_selected">
      <h2>Lorem ipsum dolor sit amet</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse odit sapiente, odio deleniti asperiores iusto animi hic sint voluptate incidunt.</p>
    </div>
    
    <div id="filters_advanced" data-id="filters_advanced" class="tab">
      <h2>Esse odit sapiente odio deleniti</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse odit sapiente, odio deleniti asperiores iusto animi hic sint voluptate incidunt.</p>
    </div>
</div>

Gerard 7 年前

已删除 display:none 从…起 .tab 并将其定位为绝对值。

$("#filters_switch").on("click", "li", function() {
  $('#filters_switch li').removeClass('tab_selected');
  $(this).addClass('tab_selected');
  $('#filters_content > div').removeClass('tab_selected');
  $('#' + $(this).find('a').data('href')).addClass('tab_selected');
});

#filters_switch {
  padding: 0 4px;
  margin-top: 10px;
  border-bottom: 1px solid #d0d0d0;
  text-align: center;
}

#filters_switch li {
  display: block;
  float: left;
  min-width: 200px;
  padding: 0 1px;
  margin-bottom: -1px;
}

#filters_switch li.tab_selected a {
  color: #000;
  background: #fff;
  border-bottom: 1px solid #fff;
}

#filters_switch a {
  display: block;
  text-decoration: none;
  padding: 3px 6px;
  font-size: 12px;
  font-weight: bold;
  background: #f2f2f2;
  color: #962b27;
  border: 1px solid #d0d0d0;
  border-radius: 8px 8px 0 0;
}

#filters_content {
  position: relative;
}

#filters_content .tab {
  padding: 0 10px;
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
  position: absolute;
}

#filters_content .tab.tab_selected {
  display: block;
  opacity: 1;
}

#filters_content .tab h2 {
  font-size: 18px;
  font-weight" bold;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="filters_switch" class="tabnav clearfix">
  <li id="filters_standard_link" class="tabnav_li tab_selected">
    <a class="tabnavlink" href="#" data-href="filters_standard">Tab 1</a>
  </li>
  <li id="filters_advanced_link" class="tabnav_li">
    <a class="tabnavlink" href="#" data-href="filters_advanced">Tab 2</a>
  </li>
</ul>

<div id="filters_content" class="tabs">
  <div id="filters_standard" data-id="filters_standard" class="tab tab_selected">
    <h2>Lorem ipsum dolor sit amet</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse odit sapiente, odio deleniti asperiores iusto animi hic sint voluptate incidunt.</p>
  </div>

  <div id="filters_advanced" data-id="filters_advanced" class="tab">
    <h2>Esse odit sapiente odio deleniti</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse odit sapiente, odio deleniti asperiores iusto animi hic sint voluptate incidunt.</p>
  </div>
</div>