Question

请您说明我应该开始尝试或研究这个问题吗？

我想要做的是能够为<div>内容提供单一来源，但能够在其他网页上使用该标记。这样我只需要更新一个源，每个页面都是相同的。

添加上下文：想一件作品＆＃34;转移指南＆＃34;一个菜单，向我的工作人员显示哪个部门做了什么，他们的工作时间，电话和传真号码。我已将此部分添加到带有屏幕覆盖的侧滑入式面板菜单中，这样我的工作人员无论他们在看什么都可以打开它。

问题是我最终会有数百页。我们将使用用户指南，SOP和过程页面。我不想要＆＃34;硬代码＆＃34;每页中转移指南的内容。当我不得不更新电话分机或传真号码等信息时，这将成为一场噩梦。

我当然不介意在网上做腿部工作，我只是不知道该怎么开始看。我的jquery相当不错，但即使是我正在寻找的名字也有助于开始研究。

提前谢谢。

Answer 1

您可以检查以下两件事并在外部js文件中为不同的函数重构javascript。

<div id='your_div'></div>
<script type="text/javascript">
    $('your_div').load('html_file.html'); 
</script>

http://api.jquery.com/load/

和

<iframe src="html_file.html"></iframe>

iframe应该不那么优先。

Answer 2

以下是一个例子：

它有信息存储在<div>标签中，最初不会显示。
点击左侧导航栏中的链接，div将被加载到右侧面板中。
我没有使用<iframe>，因为它有时不可靠，并且在这种情况下会过度。
在这里，您只需在一个地方更改div个内容，它会反映出相同的内容。

我的.html内容：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">



    function loadContent(selector){
            //$("#loadOnClick").html($(selector).html());

            $("#loadOnClick").load("resources/load.html div"+selector);
        };


    $(document).ready(function(){

        loadContent("#userGuide");

    });
</script>
<style>
div.container11 {
    width: 100%;

}
section.container1{
    display: -webkit-flex; /* Safari */
    display: flex;
}

.displayInline{
    -webkit-flex: 1;  /* Safari 6.1+ */
    -ms-flex: 1;  /* IE 10 */    
    flex: auto;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: powderblue;
    clear: left;
    text-align: center;
}

nav {
    border-right: 2px solid gray;
}

nav ul {
    list-style-type: none;
    padding-top: 5px;
}

nav ul a {
    text-decoration: none;
    line-height: 30px;
}

div#loadOnClick {
    float: right;
}

 .displayOnClick1{
    display: none;
 }
</style>
</head>
<body>

<div class="container">

<header>
   <h1>Sample: Transfer guide</h1>
</header>

 <section id="container1">
    <nav class="displayInLine" style="width: 20%; float: left;">
      <ul>
        <li><a href="#userGuide" class="quickLinks" onclick='loadContent("#userGuide")'>User Guide</a></li>
        <li><a href="#SOP" class="quickLinks" onclick='loadContent("#SOP")'>SOP</a></li>
        <li><a href="#procedurePages" class="quickLinks" onclick='loadContent("#procedurePages")'>Procedure pages</a></li>
        <li><a href="#departmentInformation" class="quickLinks" onclick='loadContent("#departmentInformation")'>Department information</a></li>
        <li><a href="#hoursOfOperations" class="quickLinks" onclick='loadContent("#hoursOfOperations")'>Hours of operations</a></li>
      </ul>
    </nav>

    <div class="displayInLine" id="loadOnClick" style="width:75%; float: right;">

    </div>
</section>

<footer>Copyright &copy; Om Sao</footer>

</div>

</body>
</html>

内容resources/load.html

<html>
<body>

<div id="userGuide" class="displayOnClick">
    <h1>User Guide</h1>
    <p>This is the userguide for employees</p>
</div>

<div id="SOP" class="displayOnClick">
    <h1>SOP</h1>
    <p>This is the Statement of purpose for employees</p>
</div>

<div id="procedurePages" class="displayOnClick">
    <h1>Procedure pages</h1>
    <p>This is the Procedure pages for employees</p>
</div>

<div id="departmentInformation" class="displayOnClick">
    <h1>Department information</h1>
    <p>This is the Department information for employees</p>
</div>

<div id="hoursOfOperations" class="displayOnClick">
    <h1>Hours of operations</h1>
    <p>This is the Hours of operations for employees</p>
</div>


</body>
</html>

多个页面上div的单个HTML内容源

2 个答案: