Javascript hide show div - 默认情况下显示 div

Question

我创建了一个脚本来显示 div单击<a>标签。但是，我想知道是否有人有一个简单的解决方案来使用相同的脚本但允许选择 div默认显示？我的脚本:

var portletToHide = new Array(
    'p_p_id_1_WAR_webformportlet_INSTANCE_P0j8_',
   'p_p_id_1_WAR_webformportlet_INSTANCE_RPu7_',
   'p_p_id_1_WAR_webformportlet_INSTANCE_6a0F_',
   'p_p_id_1_WAR_webformportlet_INSTANCE_Ta1B_',
   'p_p_id_1_WAR_webformportlet_INSTANCE_Cg3y_');

for(a=0;a<portletToHide.length; a++){
    document.getElementById(portletToHide[a]).setAttribute('style', 'display:none; visibility:hidden;')
}

function display(id, id2){

    for(a=0;a<portletToHide.length; a++){
        document.getElementById(portletToHide[a]).setAttribute('style', 'display:none; visibility:hidden;')
    }

    document.getElementById(id).setAttribute('style', 'display:block; visibility:visible;')

    if(id2){
        document.getElementById(id2).setAttribute('style', 'display:block; visibility:visible;')
    }

    $target =$('#'+id);

    $('html, body').stop().animate({'scrollTop': $target.offset().top}, 900, 'swing');
}

Answer 1

看看是否可以使用“hidden”类来呈现 HTML。

索引.css

.hidden {
    display: none;
    /* no purpose combined with display none */
    /* visibility: hidden; */
}

index.js

var portletsToHide = [
    'p_p_id_1_WAR_webformportlet_INSTANCE_P0j8_',
   'p_p_id_1_WAR_webformportlet_INSTANCE_RPu7_',
   'p_p_id_1_WAR_webformportlet_INSTANCE_6a0F_',
   'p_p_id_1_WAR_webformportlet_INSTANCE_Ta1B_',
   'p_p_id_1_WAR_webformportlet_INSTANCE_Cg3y_'];

function setPortletsVisibility( visible ) {

    for( var a=0; a < portletToHide.length; a++ ){
        setElementVisibility( portletToHide[a], visible );
    }
}

function setElementVisibilityById( elementID, visibility ) {

    var className = visible
        ? ""
        : "hidden";

    document.getElementById( elementID ).className = className;
}

function display(id, id2){

    setPortletsVisibility( true );

    setElementVisibilityById( id, true );

    if(id2){
        setElementVisibilityById( id2, true );
    }
}

function someFunction( id, id2 ) {

    display( id, id2 );

    $target = $( '#' + id );

    $('html, body').stop().animate({'scrollTop': $target.offset().top}, 900, 'swing');
}

// Default
setPortletsVisibility( false );

请注意，我不执行可能会造成干扰的 jQuery addClass/removeClass。