0

左側のすべてのメニュー項目を無効にする方法を探しています。

各 div には、実行ボタンと次へボタンがあります。実行ボタンがクリックされるまで、次のボタンを無効にする必要があります。

次のボタンを有効にするだけでなく、メニューの次の項目を有効にしてクリックできるようにする必要があります。

[次へ] をクリックすると、左側のメニューの次の項目にも移動します。

JavaScript:

// nav
$(".nav-content").hide();
$("ul.nav li:first").addClass("active").show();
$(".nav-content:first").show();

// onclick event
$("ul.nav li").click(function() {
    $("ul.nav li").removeClass("active");
    $(this).addClass("active");
    $(".nav-content").hide();

    var activenav = $(this).find("a").attr("href");
        $(activenav).show();
        return false;
});

HTML

<div id="wrap">

    <ul class="nav">
        <li><a href="#step1"><span>1</span> ONE</a></li>
        <li><a href="#step2"><span>2</span> TWO</a></li>
        <li><a href="#step3"><span>3</span> THREE</a></li>
    </ul>

    <div class="nav-container"> 

    <div id="step1" class="nav-content"> 
        <p>ONE</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

        <button class="execute" onclick="">Execute</button>
        <button class="next" onclick="">Next</button>

    </div> <!-- /step1 -->

    <div id="step2" class="nav-content"> 
        <p>TWO</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

        <button class="execute" onclick="">Execute</button>
        <button class="next"  onclick="">Next</button>

    </div> <!-- /step2 -->

    <div id="step3" class="nav-content"> 
        <p>THREE</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

        <button class="execute" onclick="">Execute</button>
        <button class="next"  onclick="">Next</button>

    </div> <!-- /step3 -->

CSS

#wrap {
    width: 100%;
}
#wrap ul.nav {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 250px;
    float: left;
}
#wrap ul.nav li {
    min-height: 60px;
    background-color: #2b6ed6;
    border-bottom: 1px solid #92b4ea;
}
#wrap ul.nav li span {
    position: relative;
    vertical-align: middle;
    margin-right: 5px;
    font-size: 40px;
}
#wrap ul.nav li a {
    color: #fff;
    display: block;
    padding: 20px 10px;
    text-decoration: none;
    line-height: 20px;
    position: relative;
    top: 0px;
    font-size: 99%;
}
#wrap .enabled {
}
#wrap .disabled {
}
#wrap ul.nav li a:focus {
    outline: none;
}
/*#wrap ul.nav li.active, */
 #wrap ul.nav li.active a {
    color: #000;
}
#wrap ul.nav li.active a:after {
    left: 100%;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
#wrap ul.nav li.active a:after {
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #2b6ed6;
    border-width: 30px;
    top: 50%;
    margin-top: -30px;
}
#wrap .nav-container {
    float: left;
    margin: 0;
    padding: 0;
    width: 60%;
    border-right: 1px solid #ccc;
    border-bottom:1px solid #ccc;
}
#wrap .nav-content {
    margin: 0;
    padding: 0;
}
#wrap .nav-content p {
    padding: 0 0 0 35px;
}

これもhttp://jsfiddle.net/XVLaX/1/に置きました

ありがとう！

4

1 に答える 1

2

この問題について私が理解したことから、これを機能させるにはいくつかのことが必要です。

次の JS コードが機能するために、既存の HTML にいくつかの前提条件の変更を加えました。リスト項目に ID を追加しました。

<ul class="nav">
    <li id="nav-step1"><a href="#step1"><span>1</span> ONE</a></li>
    <li id="nav-step2"><a href="#step2"><span>2</span> TWO</a></li>
    <li id="nav-step3"><a href="#step3"><span>3</span> THREE</a></li>
    <li id="nav-step4"><a href="#step4"><span>4</span> FOUR </a></li>
    <li id="nav-step5"><a href="#step5"><span>5</span> FIVE</a></li>
    <li id="nav-step6"><a href="#step6"><span>6</span> SIX</a></li>
    <li id="nav-step7"><a href="#step7"><span>7</span> SEVEN</a></li>
    <li id="nav-step8"><a href="#step8"><span>8</span> EIGHT</a></li>
</ul>

また、CSS へのいくつかの前提条件の追加として、状態を視覚的に区別するために無効化されたクラスを追加しました。

#csp-wrap ul.nav li.disabled a,
#csp-wrap ul.nav li.active a {
    cursor: default;
}

#csp-wrap .disabled {
    filter: alpha(opacity=50);
    opacity: .5;
}

最初に、最初の項目を除くすべてのリスト項目が無効になり、次のボタンがすべて無効になる初期状態を設定します。

// get all list items
var listItems = $("ul.nav li");

// disable all list items
listItems.addClass('disabled');

// enable the first list item
listItems.first().removeClass('disabled');

// disable all next buttons
$('.next').prop('disabled', true);

関連する次のボタンを有効にする実行ボタンのクリック ハンドラーを設定します。

// execute click handler
$('.execute').click(function(event) {
   // Get the associated next button
    $(this).siblings('.next').prop('disabled', false);
});

次のボタンのクリック ハンドラーを作成して、次のステップへの移動を処理します。

// next click handler
$('.next').click(function(event) {
    // get the associated nav item
    var navId = '#nav-' + $(this).parents('.nav-content').attr('id');
    // enable the next list item
    $(navId).next().removeClass('disabled');
    // trigger click on the next list item to step to it
    $(navId).next().trigger('click');
});

最後に、onclick イベントを変更して、アクティブまたは無効なリスト項目を考慮しないようにします。

// onclick event
$("ul.nav").on({
    click: function () {
        $("ul.nav li").removeClass("active");
        $(this).addClass("active");
        $(".nav-content").hide();

        var activenav = $(this).find("a").attr("href");
        $(activenav).show();
        return false;
    }
}, 'li:not(.disabled,.active)');

ここのフォークされたフィドルで試すことができます：http://jsfiddle.net/UZwqx/3/

于 2013-02-02T03:31:46.913 に答える