时间戳

首页 > 解决方案 > 根据父页面上的按钮单击在子页面内加载 div

javascript - 根据父页面上的按钮单击在子页面内加载 div

问题描述

这是我要完成的工作的精简示例。我有两个页面，父页面（index.html）和子页面（child.html）。子页面有多个子 html 页面，这些子页面使用 jQuery 在子页面 div 容器内基于 child.html 页面上的按钮单击动态加载，效果很好，但我需要做的是基于 child.html 加载子页面index.html 中的父按钮单击。谁能解决这个问题？

索引.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");
    });
});

标签： javascriptjqueryhtml

解决方案

推荐阅读