Question

我有这个带有标签的预制代码，我想要在标签之间点击时发生淡入/过渡效果。我已经看过这个方法的几个答案和教程，但是：
我不知道如何在不破坏已经存在的代码的情况下如何做到这一点，例如：我在哪里放置正确的命令以及我要更改什么？
这是一个包含所有code的小提琴网站这是（我认为）与css相关的部分：

.tabs {
    position: relative;   
    min-height: 400px;
    width: 496px; 
    clear: both;
    margin: 25px 0;
}

.tab {
    float: left;
}

.tab label {
    background: #E3DFD6;
    padding: 20px 10px; 
    margin-left: -1px; 
    font-family: icons;
    position: relative;
    left: 1px;
    color: #C7636D;
}

.tab [type=radio] {
    display: none;   
}

.content {
    position: absolute;
    top: 28px;
    left: 0;
    background: white;
    right: 0;
    bottom: 0;
    padding: 20px;
    padding-right: 5px;
}

[type=radio]:checked ~ label {
    background: white;
    z-index: 2;
    color: #6898A7;
}

[type=radio]:checked ~ label ~ .content {
    z-index: 1;
}

来自html：

/* menu */
  </style></head><body><div id="content"><div class="tabs"><div class="tab"><input type="radio" id="tab-1" name="tab-group-1" checked><label for="tab-1"><span class="icon" title="my profile">title</span></label>
  <div class="content"><img src="http://static.tumblr.com/nqcm3ld/iXnn711di/about.png"><div style="float: right; width: 242px; padding: 10px; text-align: justify;"><h1>Sephi Satou;</h1><div style="width: 241px; height: 280px; overflow-y: auto; overflow-x: hidden; padding: 3px; text-align: justify;"> text </div></div></div> 
   </div>
   <div class="tab"><input type="radio" id="tab-7" name="tab-group-1"><label for="tab-7"><span class="icon" title="about me">title2</span></label>
   <div class="content"><img src="http://static.tumblr.com/nqcm3ld/Cx5n71a09/about2.png" align="right" style="margin-right: 15px;"><div style="float: left; margin-left: -15px; width: 230px; padding: 10px; text-align: justify;"><h1>More about me;</h1><div style="width: 241px; height: 280px; overflow-y: auto; overflow-x: hidden; padding: 3px; text-align: justify;"> text </div></div></div></div>
               <div class="tab"><input type="radio" id="tab-2" name="tab-group-1"><label for="tab-2"><span class="icon" title="find me">title3</span></label><div class="content"><br><br><br><br><br><br><br><br><h1>onde me encontrar</h1><br><center><a href=""><span class="social">u</span></a><a href=""><span class="social">v</span></a><a href=""><span class="social">ą</span></a><a href=""><span class="social">Ć</span></a><a href=""><span class="social">ć</span></a><a href=""><span class="social">Ĵ</span></a></center></div>
            <div class="tab"><input type="radio" id="tab-6" name="tab-group-1"><label for="tab-6"><span class="icon" title="'music's i like">title4</span></label><div class="content"><h1>what i listen</h1><div style="width: 450px; margin-top: 25px; margin-left: auto; margin-right: auto; height: 285px; overflow-y: auto; overflow-x: hidden;"><img src="http://static.tumblr.com/nqcm3ld/zAwn71buz/cd1.png" width="100"> 
   <div style="float: right; padding-right: 10px; padding-top: 25px;"><h3>Album: Tingaralatingadun</h3><div class="artista">
                   tuatha de damm
               </div> 
   </div></div></div> 
   </div>   


            <div class="tab"><input type="radio" id="tab-5" name="tab-group-1"><label for="tab-5"><span class="icon" title="books i like">title5</span></label><div class="content"><h1>Fave Books</h1><div style="width: 450px; margin-top: 25px; margin-left: auto; margin-right: auto; height: 285px; overflow-y: auto; overflow-x: hidden;"><img src="http://static.tumblr.com/nqcm3ld/9iPn71dsq/lv1.png"><div style="float: right; width: 340px;"><h2>Immortal Hearts</h2><div class="artista">
                   Ellen Schreiber
               </div> 
               <div class="saga">
                   saga: Vampire Kisses 
               </div><p>description </p>
               </div>

并从javascript：

<script type="text/javascript">

}
    (function(){
        var analytics_frame = document.getElementById('ga_target');
        var analytics_iframe_loaded;
        var user_logged_in;
        var blog_is_nsfw = 'No';
        var addthis_enabled = true;

Answer 1

这是一种非常基本的方法，可以在活动按钮和相应的“标签”之间淡入淡出。使用jQuery为样式添加/删除类和css。

过渡样式是通过将.active类添加到活动/聚焦按钮（单击按钮）来完成的

转换速度在css类.button.和.container

中设置

确保在您的html中，您要在页面加载时显示的.button和相应的.content div都具有类.active

jQuery解释

点击新按钮后，我们会做一些事情。

<强> 1。 $('.button.active').removeClass('active');

我们在活动按钮上removeClass .active

<强> 2。 $(this).addClass('active');

然后，我们将.active类添加到我们使用jQuery的(this)选择器点击的按钮。

第3。 $('.content.active').removeClass('active');

我们从活动的.active div中移除.content类，就像我们在步骤1中使用该按钮一样。

<强> 4。 var tabNumber = $(this).attr('data-tab');

我们创建了一个变量＆tabaeumber＆＃39;保持data-tab值。 data-tab是我们创建的属性，用于将按钮与相应的选项卡相匹配。单击带有data-tab="1"的按钮将打开带有data-tab="1"的.container。该值不必是数字。你可以有data-tab =＆＃34; about＆＃34;只要您同时匹配.button和.container。

<强> 5。 var tabToOpen = ".content[data-tab='" + tabNumber + "']";

在这里，我们将选择器放入变量中，以便我们的下一行代码看起来更漂亮。纯粹是编码风格的选择。

$(".content[data-tab='" + tabNumber + "']").addClass('active');

VS

$(tabToOpen).addClass('active');

以上都应该做同样的事情。

我们使用attribute equals selector
找到了正确的.content div
<强> 6。 $(tabToOpen).addClass('active');

最后，我们将活动课程添加到与我们点击的.container匹配的.button。

更多

如果您要排除按钮，可以使用css :not选择器或jQuery＆＃39; s .not

除了使用类，您还可以使用jQuery添加.css而不是.addClass / .removeClass
的内联样式
同时查看.animate，稍微复杂但回调函数对于更复杂的动画可能很有用。您可以在我的latest answer中看到一个有效的例子。

＆＃13;
＆＃13;
$('.button').click(function() { $('.button.active').removeClass('active'); $(this).addClass('active'); $('.content.active').removeClass('active'); var tabNumber = $(this).attr('data-tab'); var tabToOpen = ".content[data-tab='" + tabNumber + "']"; $(tabToOpen).addClass('active'); })
＆＃13;
body { margin: 0; } .main { display: flex; flex-direction: column; height: 100vh; background-color: black; } .button-container { display: flex; } .button { display: flex; justify-content: center; align-items: center; flex: 1; background-color: hsl(0, 49.3%, 44.1%); padding: 10px; transition: all 0.6s linear; cursor: pointer; } .button.active { background-color: hsl(0, 70.6%, 45.3%); } .content-container { position: relative; display: flex; flex: 1; } .content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; color: white; opacity: 0; transition: all 0.6s linear; } .content.active { z-index: 1; opacity: 1; } /* styling to show transition*/ .content:nth-child(1) {background-color: hsl(27.4, 65%, 48.2%);} .content:nth-child(2) {background-color: hsl(173.6, 54.4%, 40.4%);} .content:nth-child(3) {background-color: hsl(285.2, 37.7%, 57.8%);}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main"> <div class="button-container"> <div class="button active" data-tab="1">Button 1</div> <div class="button" data-tab="2">Button 2</div> <div class="button" data-tab="3">Button 3</div> </div> <div class="content-container"> <div class="content active" data-tab="1"> <h1>Content Area 1</h1> <p>something something something</p> </div> <div class="content" data-tab="2"> <h1>2nd Content Area</h1> <p>words words words</p></div> <div class="content" data-tab="3"> <h1>Area of Content III</h1> <p>stuff stuff stuff</p></div> </div> </div>
＆＃13;
＆＃13;
＆＃13;

玩它

这里是小提琴，所以你可以测试它并玩弄不同的转换想法。

https://jsfiddle.net/Hastig/Lnsotzmx/

Answer 2

试试这个淡化效果..

https://jsfiddle.net/Hastig/dr6pqy23/5/

这里是jQuery代码..

$('input:radio').click(function() {
  $('.content').css({
    'opacity': '0',
    'zIndex': '0'
  });
  $(this).closest('.tab').find('.content').animate({
    opacity: 1,
    zIndex: 1
  }, 400, function() {
    //callback if needed, after animation completes
  });
})

用这个替换第一个.content div ..

<div class="content" style="opacity: 1; z-index: 1;">

这将显示第一个标签＆＃39;并隐藏其他人。

并替换这些css条目..

 .content {
   position: absolute;
   top: 28px;
   left: 0;
   background: white;
   /* fundo do about */
   right: 0;
   bottom: 0;
   padding: 20px;
   padding-right: 5px;
   opacity: 0;
   z-index: -1;
 }

 [type=radio]:checked ~ label ~ .content {

 }

使用javascript / css

2 个答案:

jQuery解释

更多

玩它