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 回答