使用javascript/css在选项卡之间淡入淡出
使用javascript/css在选项卡之间淡入淡出
提问于 2017-05-14 12:23:42
我有这个带有标签的预制代码，我希望当你在标签之间单击时，会出现淡入淡出/过渡效果。我已经看过几个关于这种方法的答案和教程，但是：
我只是不知道如何在不破坏已经存在的代码的情况下做到这一点，比如:我到底应该把正确的命令放在哪里，我应该修改什么？
这是一个包含所有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;回答 2
Stack Overflow用户
发布于 2017-05-15 06:11:24
这是一个非常基本的方法，可以在活动按钮和相应的“标签”之间淡入淡出，使用jQuery来添加/删除类和样式。
通过向活动/焦点按钮(单击的按钮)添加一个.active类来完成过渡样式。
转换速度在css类.button.和.container中设置。
确保在html中，您希望在页面加载上显示的.button和相应的.content div都具有.active类
jQuery解释了
当一个新按钮被点击时，我们会做一些事情。
1. $('.button.active').removeClass('active');
We removeClass .active on the active按钮
2. $(this).addClass('active');
然后，我们使用jQuery的(this)选择器将.active类添加到所单击的按钮。
3. $('.content.active').removeClass('active');
我们从活动的.content div中删除.active类，方法与步骤1中的按钮相同。
4. var tabNumber = $(this).attr('data-tab');
我们创建一个变量'tabNumber‘来保存data-tab的值。data-tab是我们创建的一个属性，用于将按钮与相应的选项卡相匹配。单击带有data-tab="1"的按钮将打开带有data-tab="1"的.container。值不必是数字。只要同时匹配.button和.container，就可以使用data-tab="about“。
5. var tabToOpen = ".content[data-tab='" + tabNumber + "']";
这里我们将选择器放入一个变量中，这样我们的下一行代码看起来就更漂亮了。纯粹是一种编码风格的选择。
$(".content[data-tab='" + tabNumber + "']").addClass('active');vs
$(tabToOpen).addClass('active');上面的代码应该都做同样的事情。
我们通过使用attribute equals selector来找到正确的.content目录
6. $(tabToOpen).addClass('active');
最后，我们将活动类添加到与我们单击的.button相匹配的.container中。
More
如果有您想排除的按钮，可以使用css选择器或:not的.not
除了使用类之外，还可以使用jQuery通过.css而不是.addClass/.removeClass来添加内联样式
还可以看看.animate，它稍微复杂一些，但是回调函数对于更复杂的动画很有用。您可以在我的latest answer中看到一个工作示例。
$('.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');
})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%);}<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>
Play With It
这里是小提琴，这样你就可以测试它并尝试不同的转换想法。
Stack Overflow用户
发布于 2017-05-16 11:07:40
试试这个淡入淡出的效果。
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;">这将显示第一个“标签”，并隐藏其他标签。
并替换这些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 {
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43960358
复制相关文章
相似问题
腾讯云开发者
