Question

这是我想要完成的一个精简的例子。我有两页父页面（index.html）和子页面（child.html）。子页面有多个子页面html页面，使用jQuery在子页面div容器内动态加载，基于child.html页面上的按钮点击，这很好但我需要做的是在child.html中加载子页面父按钮在index.html中单击。任何人都可以解决这个问题吗？

的index.html

<body>
    <div class="container-fluid">
        <div class="row">
            <ul>
                <h1>Main Nav</h1>
                <!--When this button is clicked, it opens child.html in a new tab and must load pageone.html inside the #shared-page div of child.html page and the corresponding <li> item in child.html page should be active--> 
                <li><a href="child/child.html" class="share-one" target="_blank">Page One</a></li>
                <!--When this button is clicked, it opens child.html in a new tab and must load pagetwo.html inside the #shared-page div of child.html page and the corresponding <li> item in child.html page should be active -->
                <li><a href="child/child.html" class="share-one" target="_blank">Page Two</a></li>
            </ul>
        </div>
    </div>
</body>

child.html

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">
                <ul>
                    <h1>Left Nav</h1>
                    <li><button class="share-one" type="button">Page One</button></li>
                    <li><button class="share-two" type="button">Page Two</button></li>
                </ul>
            </div>
            <div class="col-md-9">
                <div id="shared-page"></div>
            </div>
        </div>
    </div>
</body>

jQuery动态加载共享页面

$(document).ready(function(){
    $(".share-one").on("click",function(){
        $("#shared-page").load("https://www.hostnanny.tk/test/shared/shareone.html");
    });

    $(".share-two").on("click",function(){
        $("#shared-page").load("https://www.hostnanny.tk/test/shared/sharetwo.html");
    });
});

基于父页面上的按钮，在子页面内加载div

0 个答案: