Fatal编程技术网
  • javascript/
  • 使用javascript/css在选项卡之间淡入淡出

使用javascript/css在选项卡之间淡入淡出

javascript jquery html css

使用javascript/css在选项卡之间淡入淡出,javascript,jquery,html,css,fade,Javascript,Jquery,Html,Css,Fade,我有这个预先制作的代码，里面有标签，我希望当你在标签之间点击时会产生淡入淡出/过渡的效果。我已经看到了一些关于这个方法的答案和教程，但是： 我只是不知道如何在不破坏已有代码的情况下执行此操作，例如：我应该在哪里放置正确的命令，以及我应该更改什么？ 这是一个包含所有内容的fiddle网站。 这是（我认为）与css相关的部分： .tabs { position: relative; min-height: 400px; width: 496px; clear:

我有这个预先制作的代码，里面有标签，我希望当你在标签之间点击时会产生淡入淡出/过渡的效果。我已经看到了一些关于这个方法的答案和教程，但是：
我只是不知道如何在不破坏已有代码的情况下执行此操作，例如：我应该在哪里放置正确的命令，以及我应该更改什么？
这是一个包含所有内容的fiddle网站。
这是（我认为）与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>

/*菜单*/
标题
佐藤；正文
标题2
更多关于我；正文
标题3












以我为中心

标题4我所听的
专辑：Tingaralatingadun
杜阿塔·德达姆
书名5：永恒的心
艾伦·斯瑞博
传奇：吸血鬼之吻
描述
从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;


}
（功能（）{
var analytics_frame=document.getElementById（'ga_target'）；
已加载的var分析；
var用户已登录；
var blog_is_nsfw='否'；
var addthis_enabled=true；
这里有一个非常基本的方法，可以使用jQuery添加/删除样式的类和css，在活动按钮和相应的“选项卡”之间淡入淡出

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

转换速度是在css类
按钮中设置的。
和
容器

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

jQuery解释 当点击一个新按钮时，我们会做一些事情

1.
$（'.button.active'）.removeClass（'active'）；

我们
删除活动按钮上的类
.active

2.
$（this）.addClass（'active'）；

然后，我们将
.active
类添加到使用jQuery选择器单击的按钮中

3.
$（'.content.active'）.removeClass（'active'）；

我们从活动的
.content
div中删除
.active
类，方法与步骤1中的按钮相同

4.
var tabNumber=$（this）.attr（'data-tab'）；

我们创建一个变量“tabNumber”来保存
数据选项卡
值。数据选项卡是我们创建的一个属性，用于将按钮与相应选项卡相匹配。单击带有
数据选项卡=“1”
的按钮将打开带有
数据选项卡=“1”
的.container。该值不必是数字。您可以使用数据选项卡=“about”只要您同时匹配
.button
和
.container

5.
var tabToOpen=“.content[data tab=”“+tabNumber+”]；

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

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

以上两者应该做同样的事情

我们使用

6.
$（tabToOpen）.addClass（'active'）；

最后，我们将活动类添加到与我们单击的
.button
匹配的
.container

更多 如果有要排除的按钮，可以使用css选择器或jQuery的

除了使用类，您还可以使用jQuery使用.css而不是/

另外，看看更复杂的一点，但是回调函数对于更复杂的动画非常有用

$（'.button'）。单击（函数（）{
$（'.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'）；
})
正文{
保证金：0；
}
梅因先生{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
背景色：黑色；
}
.按钮容器{
显示器：flex；
}
.按钮{
显示器：flex；
证明内容：中心；
对齐项目：居中；
弹性：1；
背景色：hsl（0,49.3%，44.1%）；
填充：10px；
过渡：所有0.6s线性；
光标：指针；
}
.button.active{
背景色：hsl（0,70.6%，45.3%）；
}
.内容容器{
位置：相对位置；
显示器：flex；
弹性：1；
}
.内容{
位置：绝对位置；
顶部：0；右侧：0；底部：0；左侧：0；
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
文本对齐：居中；
颜色：白色；
不透明度：0；
过渡：所有0.6s线性；
}
.content.active{
z指数：1；
不透明度：1；
}
/*显示过渡的样式*/
内容：第n个孩子（1）{背景颜色：hsl（27.4,65%，48.2%）；}
内容：第n个孩子（2）{背景颜色：hsl（173.6,54.4%，40.4%）；}
.内容：第n个孩子（3）{背景颜色：hsl（285.2,37.7%，57.8%）；}

按钮1
按钮2
按钮3
内容区1
一些东西

第二内容区
言语

内容领域三
东西
试试这种淡出效果

这是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;">
如果你把你的代码削减到最低要求，并将其发布在这里，也许还有一个链接到一个供其他人使用的提琴上，你会得到更多的回复：）这是两个流行的选项。我已经将代码中遇到问题的部分和提琴网站的链接放在这里，谢谢 
<div class="content" style="opacity: 1; z-index: 1;">

 .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 {

 }