使 a.active 与背景图像幻灯片一起工作

【问题标题】：making a.active work with background image slide使 a.active 与背景图像幻灯片一起工作
【发布时间】：2013-09-11 03:51:51
【问题描述】：

我在尝试让它工作时遇到了一些麻烦，我是 javascript 新手，我很确定我需要它。我想让我的背景图像在悬停时滑动，并在选择时在其正确的 div 上保持活动状态。我目前拥有的 html、css 和 javascript 明智地工作得很好......javascript 部分是当用户点击 div 时，一个容器在它下面打开 - 它应该可以工作，但是，我不知道如何集成给初始 div a.active 在该 div 上保持活跃，而不是总是回到中心。任何想法、建议和/或帮助将不胜感激。

更新： 这是下面提供的内容的 jsfiddle：http://jsfiddle.net/mGQ8w/4/

这是我目前得到的：

HTML

<div id="profile_selection">
    <a href="#nos_profiles" class="profile_selection">
        {Ñا}<br />Members
    </a>
    <a href="#registered_profiles" class="profile_selection">
        Registered<br />Members
    </a>
    <a href="#team_profiles" class="profile_selection">
        Team<br />Profiles
    </a>
    <div id="profile_selection_slider"></div>
</div>

<div id="nos_profiles" class="selection"></div>

<div id="registered_profiles" class="selection"></div>

<div id="team_profiles" class="selection"></div>

CSS

#profile_selection {
    width: 612px;
    height: 152px;
    padding: 0;
    margin: 15px auto;
    position: relative;
}
#profile_selection a {
    width: 200px;
    height: 105px;
    padding: 45px 0 0 0;
    margin: 0;
    background: #333;
    border: 2px solid #444;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    -moz-box-shadow: inset 0 -0.3em 0.9em 0.3em #000, 0 28px 24px -24px #000;
    -webkit-box-shadow: inset 0 -0.3em 0.9em 0.3em #000, 0 28px 24px -24px #000;
    box-shadow: inset 0 -0.3em 0.9em 0.3em #000, 0 28px 24px -24px #000;
    float: left;
    -moz-transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    color: #FFF;
    font: 24px Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-variant: small-caps;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
    position: relative;
    z-index: 4;
}
#profile_selection a:hover, #profile_selection a.active {
    height: 100px;
    padding: 50px 0 0 0;
    background: #222;
    -moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    -webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    color: #DF7401;
}
#profile_selection_slider {
    width: 64px;
    height: 16px;
    background: url(http://www.nosclan.net/images/Home/menu_bg_hover.png) no-repeat 0 0 transparent;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    position: absolute;
    top: 152px;
    left: 275px;
    z-index: 4;
}
#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider {
    left: 71px;
}
#profile_selection a:nth-of-type(2):hover ~ #profile_selection_slider {
    left: 275px;
}
#profile_selection a:nth-of-type(3):hover ~ #profile_selection_slider {
    left: 480px;
}
#nos_profiles {
    width: 950px;
    height: 500px;
    padding: 0;
    margin: 0 auto;
    background: #222;
    border: 2px solid #444;
    border-bottom: none;
    -moz-border-radius: 12px 12px 0 0;
    -webkit-border-radius: 12px 12px 0 0;
    border-radius: 12px 12px 0 0;
    -moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    -webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    display: none;
    position: relative;
    top: -10px;
    z-index: 1;
}
#registered_profiles {
    width: 950px;
    height: 500px;
    padding: 0;
    margin: 0 auto;
    background: #222;
    border: 2px solid #444;
    border-bottom: none;
    -moz-border-radius: 12px 12px 0 0;
    -webkit-border-radius: 12px 12px 0 0;
    border-radius: 12px 12px 0 0;
    -moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    -webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    display: none;
    position: relative;
    top: -10px;
    z-index: 1;
}
#team_profiles {
    width: 950px;
    height: 500px;
    padding: 0;
    margin: 0 auto;
    background: #222;
    border: 2px solid #444;
    border-bottom: none;
    -moz-border-radius: 12px 12px 0 0;
    -webkit-border-radius: 12px 12px 0 0;
    border-radius: 12px 12px 0 0;
    -moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    -webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    display: none;
    position: relative;
    top: -10px;
    z-index: 1;
}

JAVASCRIPT

$(document).ready(function () {
    $('a.profile_selection').click(function () {
        var a = $(this);
        var selection = $(a.attr('href'));
        selection.removeClass('selection');
        $('.selection').hide();
        selection.addClass('selection');
        if (selection.is(':visible')) {
            selection.slideToggle(400)
        } else {
            selection.slideToggle(400)
        };
    });
});

最新更新:::::

http://jsfiddle.net/mGQ8w/13/

是否有可能在用户决定单击不同的 div 后，活动类恢复正常，而新选择的 div 变为活动状态？现在的情况是，如果您单击所有 3 个，它们都将变为活动状态....我希望只有 1 个处于活动状态-用户单击的那个....所以如果用户单击在NOS Members div上，它变为活动状态，然后如果用户点击Registered Members，NOS成员不再活动，但Registered Members div是...

【问题讨论】：

  • 你错过了 jquery 库。
  • 这不是答案，我只是想告诉你更新你的 js fiddle 链接，并在 Frameworks and Extensions 下选择 JQuery，这样它就不会在你的小提琴..谢谢..jsfiddle.net/mGQ8w/2

标签： javascript jquery html css jquery-animate


【解决方案1】：

您需要使用addClass 添加active 类& 可以使用removeClass 从先前的选择中删除删除active 类。

$(document).ready(function(){
    $('a.profile_selection').click( function(){
       var a = $(this) ;
       $('a.profile_selection').removeClass('active');
       $(this).addClass('active');
       var selection = $( a.attr('href') );
       selection.removeClass('selection');
       $('.selection').hide();
       selection.addClass('selection');
       if( selection.is(':visible') ){
           selection.slideToggle(400)
       }else{ 
           selection.slideToggle(400)
       };
    });
});

这需要与@N1ck 提供的css更改一起使用，如下所示

#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider, 
#profile_selection a:nth-of-type(1).active ~ #profile_selection_slider {
    left: 71px;
}
#profile_selection a:nth-of-type(2):hover ~ #profile_selection_slider, 
#profile_selection a:nth-of-type(2).active ~ #profile_selection_slider {
    left: 275px;
}
#profile_selection a:nth-of-type(3):hover ~ #profile_selection_slider, 
#profile_selection a:nth-of-type(3).active ~ #profile_selection_slider {
    left: 480px;
}

查看http://jsfiddle.net/mGQ8w/14/

【讨论】：

  • 差不多了...我的背景图像“#profile_selection_slider”需要保留在活动类中 - 如何？
  • 您是否希望滑块在所选选项上处于活动状态，并且还应该出现在悬停效果中。如果选择了第一个，它下面会出现一个，如果我们悬停第二个，另一个滑块也应该显示在它下面？这是要求吗？
  • 是的，当您将鼠标悬停在 3 个 div 容器中的任何一个上时，滑块背景图像会滑动 - 单击其中一个容器后，它全部保持活动状态，并且滑块背景图像保持在所选 div 下方。然后实现另一个 javascript，一旦单击 3 个 div 之一，它就会打开一个容器。
  • 我猜 N1ck 的答案很好:)
  • 实际上，我的错误 - 如果运行最新的 jquery 库有效，但不幸的是我运行的是 1.3.2 版本 - 有没有办法让尼克在 1.3.2 上工作？
【解决方案2】：

为.active 提供与:hover 相同的规则，例如：

#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider{
    left: 71px;
}

变成

#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider,
#profile_selection a:nth-of-type(1).active ~ #profile_selection_slider{
    left: 71px;
}

然后使用.active 类切换选定的菜单项。

var menuItems = $('a.profile_selection');

menuItems.on('click', function () {
    var a = $(this),
        selection = $(a.attr('href'));

    menuItems.removeClass('active');
    a.toggleClass('active');

    ...etc
});

这里以小提琴为例：http://jsfiddle.net/n1ck/FbeFU/

【讨论】：

  • 太棒了，谢谢;)
猜你喜欢
  • 1970-01-01
  • 2015-07-30
  • 1970-01-01
  • 2011-03-26
  • 1970-01-01
  • 1970-01-01
  • 2012-08-04
  • 2014-09-13
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode