javascript - 侧面菜单包含指向 Iframe 中各部分的链接-6ren

javascript - 侧面菜单包含指向 Iframe 中各部分的链接

转载作者：行者123 更新时间：2023-11-28 05:02:00

我创建了一个具有以下结构的网页:

使用侧边菜单的主 html；辅助 html 包含我想在主 html 中显示的信息。

我想实现以下目标。假设辅助 html 有一个名为 intro 的部分。我想将该部分链接到菜单项。因此，当我按下相应的按钮时，我想在我的主 html 中显示从 #intro 部分开始的辅助 html。

这是我在主 html 中的侧边栏导航

<div id="main">
        <div class="wrapper">
            <!-- LEFT SIDEBAR NAV-->
            <aside id="left-sidebar-nav">
                <ul id="slide-out" class="side-nav leftside-navigation">
                    <li class="no-padding">
                        <ul class="collapsible collapsible-accordion">
                            <li class="bold"><a class="collapsible-header waves-effect waves-blue active"><i class="mdi-action-view-carousel"></i> Field</a>
                                <div class="collapsible-body">
                                    <ul>
                                        <li class="active"><a href="#intro">Intro</a>
                                        </li> 
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </li>
            </aside>
       </div>

这是第二个 html 中的部分。

<div class="divider"></div>
<div class="section" id="intro">

        <li style="list-style: disc">
            some text.
        </li>
</div>
</div>

当我按下左侧导航栏中的“介绍”按钮时，我想在主 html 中打开“介绍”部分的第二个按钮。

我想在我的主 HTML 中加载第二个 html 的原因是它使用不同的 css 样式，如果我合并它们，它会破坏我的格式。

有什么解决办法吗？

谢谢!

最佳答案

可以通过 jQuery 轻松实现:

这是我的建议:

步骤 1

首先，确保 secondary.html 中有这些部分文件:

<div id="intro">Intro section</div>
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
<div id="section3">Section 3</div>

安，在 main.html ，确保您有一个带有 id=content 的元素。这将是您的占位符。像这样:

<div id="content"></div>

步骤 2

修改你的 anchor :

点href到虚拟 URL ( # )。
添加一个类，以便我们可以使用 jQuery 捕获它。我在这里命名为btn-load-section .
添加 data- 属性，以便我们可以向每个 anchor 添加一些有用的数据，以便稍后获取。我在这里添加了data-url和data-section .

像这样:

<li><a href="#" class="btn-load-section" data-url="secondary.html" data-section="intro">Intro</a>
<li><a href="#" class="btn-load-section" data-url="secondary.html" data-section="section1">Section 1</a>
<li><a href="#" class="btn-load-section" data-url="secondary.html" data-section="section2">Section 2</a>
<li><a href="#" class="btn-load-section" data-url="secondary.html" data-section="section3">Section 3</a>

步骤 3

在我们的 <body> 的末尾部分(在 main.html 中)，您可以添加以下代码:

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    /*
        Executes the script inside the anonymous function 
        only when the page is loaded
    */
    $(document).ready(function() {

        /* 
            select all anchors with 'btn-load-section' class (class = dot before)
            and bind a click event
        */
        $("a.btn-load-section").on("click", function(e) {
            e.preventDefault(); //this cancel the original event: the browser stops here

            var url = $(this).data('url'); //get the data-url attribute from the anchor
            var section = $(this).data('section'); //get the data-section attribute from the anchor

            var contentDiv = $("#content"); //select the div with the ID=content (id = hash before). This will be our target div.

            /*
                executes the jQuery .load function
                It will load the url and search for the correspondent section (load page fragment)
                e.g. will call load with "secondary.html #intro" (#intro is our fragment on the secondary.html page).
            */
            contentDiv.load(url + " #" + section); 


        });

    });
</script>

由于我不知道您对 jQuery 的熟悉程度，所以我添加了一些评论。

第一个脚本标签从 CDN 加载 jQuery。

您可以阅读有关 jQuery 的更多信息 .load功能here 。但基本上它允许加载页面片段:

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

这只是一种可能的方法。希望对您有帮助!

关于javascript - 侧面菜单包含指向 Iframe 中各部分的链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42078451/