打开和关闭课程

时间:2014-08-19 19:40:33

标签: javascript jquery html css

我在页面上有一些链接。单击城域链接时,应禁用状态链接。单击县链接时,应该重新链接。通过jquery使用add和remove类只能使用一次。我继续使用toggle类,县和地铁链接都可以关闭和打开链接。为了更好的解释,我也创造了一个小提琴。

http://jsfiddle.net/8u4jw72h/

这是java脚本

function stateSelection(evt) {       
app.map.on("load", function () {

    $('.state-link').on('click', function () {

        switch (params.region_code) {
            case 9:
                zoomTo = conn;
                break;
            case 23:
                zoomTo = maine;
                break;
            case 25:
                zoomTo = mass;
                break;
            case 44:
                zoomTo = rhode;
                break;
        }
        app.map.centerAndZoom(zoomTo, 8);
        $('#btnModelReset').click();           

    });
    if (app.map.getZoom() <= 7) {            
        app.map.graphics.clear();
    }

    dojo.connect(dojo.byId('ctyRegion'), 'onclick', function () {
        app.map.centerAndZoom(home, 7);            
        enable();
    });
    dojo.connect(dojo.byId('msaRegion'), 'onclick', function () {
        app.map.centerAndZoom(home, 7);                                  
        disable();                       
    });

});//end load  
}//end state selection

function disable() {
$(".state-link").toggleClass('disableClass');
}
function enable() {
$(".state-link").toggleClass('enableClass');
}

这是css

a {
color: #333;
outline: none;
padding-left: 3px;
padding-right: 3px;
text-decoration: underline;
}

a:link, a:visited,
a:active, a:hover {
    color: #333;
}

a:hover {
    background-color: #c7d1d6;
}

.disableClass{
pointer-events:none;
text-decoration:none;
opacity: 0.4;
cursor:default;
}

.enableClass{
color: #333;
outline: none;
padding-left: 3px;
padding-right: 3px;
text-decoration: underline;    
opacity:1;
pointer-events:all;
cursor:default;
}

2 个答案:

答案 0 :(得分:2)

你忘了删除旧班,试试:

$('#msaRegion').click(function () {
    $(".state-link").removeClass('enableClass').addClass('disableClass');
});
$('#ctyRegion').click(function () {
    $(".state-link").removeClassClass('disableClass').addClass('enableClass');
});

答案 1 :(得分:1)

或者只使用一个类和下面的代码段

$('#msaRegion').click(function () {
    $(".state-link").addClass('disableClass');
});
$('#ctyRegion').click(function () {
    $(".state-link").removeClass('disableClass');
});

jsFiddle