Question

我将div帮助页面加载到index.html内的div中。加载在我的index.html页面上正常工作。问题是，一旦helppage div加载到index.html，helpSection下的div都会出现，并且在我能够单击其中一个div之前不会消失。我想要的只是显示的第一个helpDiv和隐藏的所有其他内容，如果不可能只隐藏所有div。我试图使用jquery代码，但无法成功使其工作。

jsfiddle example

非常感谢任何帮助。

的index.html

<body>
    <div id="loadHelpHere"></div>
</body>

Html代码

<div id="helpPage">
    <div id="helpMenu">
         <h4>Help Menu</h4>
        <ul id="menu">
            <li class="current_page_item justClick"><a href="#" data-id="div1">Help Section 1</a>
            </li>
            <li class="justClick"><a href="#" data-id="div2">Help Section 2</a>
            </li>
        </ul>
    </div>
<div id="helpSection">
    <div class="helpDiv">
        <header>Help Documentation</header>
        <article>Works!</article>
    </div>
    <div class="helpDiv1">
        <header>Help Documentation content 1</header>
        <article>Help Section 1</article>
    </div>
    <div class="helpDiv2">
        <header>Help Documentation content 2</header>
        <article>Help Section 2</article>
    </div>
</div>

jquery

$(document).ready(function(){
    $( "#loadHelpHere" ).load( 'help.html #helpPage' );
    $(document).on('click', '.justClick', function (e) {
        $('#helpSection div').not(".helpDiv").hide();
        $('#helpSection div.helpDiv').html($('#helpSection div.helpDiv' + ($(this).index() + 1)).html());
    });
});

Answer 1

因此，要么添加一个CSS类来默认隐藏它们，要么在加载完成时将它们设置为隐藏。

#helpSection > div {
    display : none;
}

您可以显示默认内容并删除内容，也可以切换元素的可见性，而不是替换默认内容。

https://jsfiddle.net/pt74q4dk/1/

Answer 2

除了第一个“helpDiv”之外，我会在每个style="display: none"上设置<div class="helpDiv">或者设置某种类似的css：

/* This will target classes containing the string "helpDiv" but not the class helpDiv */
[class*="helpDiv"]:not(.helpDiv) { 
    display: none;
}

然后为.justClick执行类似的操作：

$(document).on('click', '.justClick', function (e) {

    // This will hide all divs that contain a class matching "helpDiv"
    $('#helpSection [class*="helpDiv"]').hide();

    // Grab the index of the current .justClick
    var index = $(this).index() + 1;

    // Show the corresponding "helpDiv"
    $('#helpSection div.helpDiv' + index).show();

});

jsfiddle updated

Answer 3

set style =“display：none;”在你希望默认隐藏的div上，然后在你需要的时候$。显示它们。

$(document).ready(function(){
    $( "#loadHelpHere" ).load( 'help.html #helpPage' );
    $( "#loadHelpHere" ).find('#helpSection').hide();
});

另外，你错过了 div＃loadHelpHere

的结束标记

Jquery隐藏不在里面工作.on（）

3 个答案: