Question

我在jsp页面上有多个DIV，我想在按钮/链接点击事件上只加载一个特定的DIV。我不想在页面加载时使用hide（）或display：none来隐藏DIV。一个jQuery / Javascript代码会有所帮助。感谢。

我想用Div id = 1＆amp; 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的名称，除了整个工作正常。除了我不想使用hide和show进行div切换。

Answer 1

如果你想在按钮点击或其他动作中将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”作为数组的第3个元素传递。自定义属性使用“c”，默认属性根本不使用任何内容。如果你只是传递一个字符串而不是一个多维数组，如果该类型是一个“输入”，它会将该字符串视为值，否则它将把它视为“innerHTML”。如果你只传递一个数组，那也可以。

要显示特定的Div on按钮/链接，请单击？

1 个答案: