Для отображения определенного Div на кнопку / ссылку нажмите?

Question

Для отображения определенного Div на кнопку / ссылку нажмите?

0

У меня есть несколько DIVs на странице jsp, я хочу загрузить только конкретный DIV в событие click/link click. Я не хочу использовать hide() или display: none, чтобы скрыть DIV во время pageload. Мне поможет код jQuery/Javascript. Благодарю.

Я хотел бы сделать это с Div id = 1 & 2.

<div id=1>

            <div id=CreBdh>
             <fieldset style="border : 1px solid #000000">
                              <legend> 
                              <img src="" /> 
             <strong>Step 18:</strong><br>
             </legend><br>
             Please Confirm that this step has been completed.

             <input type="submit" value="Confirm" id="Connckhbx4btn"  onclick="sah1(CreBdh)"/>
             </fieldset>
            </div><br><br>

            <div id=CreBdh1 >
             <fieldset style="border : 1px solid #000000">
                              <legend> 
                              <img src="../images/RightNextArrowDisabled.gif" /> 
                              <strong>Step 19: Create BAR Rate Plan </strong><br>
                              </legend><br>
             Please Confirm that this step has been completed.

             <input type="submit" value="Confirm" id="Connckhbx5btn"  onclick="sah1(CreBdh1)"/>
             </fieldset>
            </div><br><br>


            <div id=CreBdh2>
             <fieldset style="border : 1px solid #000000">
                              <legend> 
                              <img src="" />  
             <strong>Step 20: </strong><br>
             </legend><br>
             Please Confirm that this step has been completed.

             <input type="submit" value="Confirm" id="Connckhbx6btn"  onclick="sah1(CreBdh2)"/>
             </fieldset>
            </div><br><br>


            <div id=CreBdh3>
             <fieldset style="border : 1px solid #000000">
                              <legend> 
                              <img src="../images/RightNextArrowDisabled.gif" /> 
             <strong>Step 21: Create DAILY Rate Plan </strong><br>
             </legend><br>
             Please Confirm that this step has been completed.

             <input type="submit" value="Confirm" id="Connckhbx7btn"  onclick="sah1(CreBdh2)"/>
             </fieldset>
            </div>




</div>


<div id=2>

            <div id=PopData>
            <fieldset style="border : 1px solid #000000">
                              <legend> 
                              <img src="" /> 
                              <strong>Step 22</strong><br>
                              </legend>

             Please Confirm that this step has been completed.

             <input type="submit" value="Confirm" id="Connckhbx8btn"  onclick="sah1(PopData)"/>
             </fieldset>
            </div><br><br>

            <div id=PopData1>
             <fieldset style="border : 1px solid #000000">
                              <legend> 
                              <img src="../images/RightNextArrowDisabled.gif" /> 
             <strong>Step 23</strong><br>
             </legend>
             Please Confirm that this step has been completed.

             <input type="submit" value="Confirm" id="Connckhbx9btn"  onclick="sah1(PopData1)"/>
             </fieldset>
            </div>

</div>

And was using this Jquery to toggle 
var i=0;
var arr=[];

$(document).ready(function(){
    $("div.navItem").each(function(){
        arr[i]=this.id.split("_")[1];
        $(this).bind('click',function(){for(i=2;i<arr.length;i++){$("#"+arr[i]).hide();}$("#"+this.id.split("_")[1]).show();});
        if(i==0){
            i++;
            }else if(i==1){
            i++;
            }
        else{
            $("#"+this.id.split("_")[1]).hide();
            i++;
        }
    });
});

Я изменил имена div 1 и 2, кроме того, что все работает отлично. Кроме того, я не хочу, чтобы div переключался с помощью hide и show.

user3547315 18 апр. 2014, в 03:22

Источник

1

Где код? Что ты уже пробовал?
Coop 18 апр. 2014, в 01:13

Теги:

javascript

jquery

html

1 ответ

Ещё вопросы

Helpful · Answer 1 · 2014-04-17T23-55-00.000Z

Если вы хотите добавить div в DOM нажатием кнопки или другим действием, вы можете использовать .appendChild - я написал следующую функцию и довольно тщательно протестировал ее с помощью IE10 (выбор на рабочем месте, а не мой).

Element.prototype.customAttribute=function(customname, customvalue){
    var z=document.createAttribute(customname);
    z.value=customvalue;
    this.setAttributeNode(z);
    z=null;
}
function toType(obj){
    return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
}
function newElement(type, props){
    type=type||"div";
    props=props||[];
    if (props.length==2 && toType(props)=="array" && toType(props[0])!="array"){
        props=[props];
    }
    if (props.length==1 && toType(props[0])=="string" && toType(props)=="array"){
        switch (type){
            case "input":
                props=[["value",props[0]]];
            break;
            default:
                props=[["innerHTML",props[0]]];
            break;
        }
    }
    if (toType(props)=="string"){
        switch (type){
            case "input":
                props=[["value",props]];
            break;
            default:
                props=[["innerHTML",props]];
            break;
        }
    }
    var returnElement=document.createElement(type);
    for (var i=0; i<props.length; i++){
        switch (props[i][2]){
            case "c":
            case 2:
                returnElement.customAttribute(props[i][0],props[i][1]);
            break;
            case "s":
            case 1:
                returnElement.style[props[i][0]]=props[i][1];
            break;
            default:
                returnElement[props[i][0]]=props[i][1];
            break;
        }
    }
    return returnElement;
}

Использование: вы можете создать элемент и назначить ему определенные вещи следующим образом:

var newDiv=newElement("div",[["innerHTML","default properties (like innerHTML) go in an array with 2 elements."],["backgroundColor","#000000","s"/*s = style*/],["weirdName","Custom attributes have a special third element, 'c' for 'custom'"]]);

document.body.appendChild(newDiv);'

Как вы можете видеть, если вы хотите назначить атрибут стиля, вы передаете "s" в качестве третьего элемента массива. Пользовательские атрибуты используют "c", а атрибуты по умолчанию ничего не используют. Если вы просто передаете строку вместо многомерного массива, она будет обрабатывать строку как значение, если тип является "входом", и в противном случае он будет рассматривать его как "innerHTML". Если вы передадите только один массив, это тоже сработает.