Question

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

使用侧边菜单的主要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>

这是第2段html中的部分。

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

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

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

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

任何解决方案？

谢谢！

Answer 1

使用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步

修改锚点：

将href指向虚拟网址（#）。
添加一个类，以便我们可以使用jQuery来捕获它。我在这里命名为btn-load-section。
添加data-属性，以便我们可以为每个锚添加一些有用的数据，以便稍后抓取它。我在此处添加了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。但基本上它允许加载页面片段：

与$ .get（）不同，.load（）方法允许我们指定部分要插入的远程文档。这是通过特殊的方式实现的 url参数的语法。如果有一个或多个空格字符包含在字符串中，第一个字符串后面的字符串部分假设space是一个确定内容的jQuery选择器要加载。

这只是一种可行的方法。希望它有所帮助！

侧边菜单，包含指向iframe中零件的链接

1 个答案:

第1步

第2步

第3步