2

私はこれを機能させるのに苦労しています。私は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;
}

ジャバスクリプト

$(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 メンバー div でアクティブになり、ユーザーが登録メンバーをクリックすると、NOS メンバーはアクティブではなくなりますが、登録メンバー div は...

4

2 に答える 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/

于 2013-09-11T04:04:31.617 に答える