Question

我想让某些div进入同一网站的多个页面，就像stackExchange栏是所有页面的一样。用css或html做它会很好。我目前没有关于如何做到这一点的理论。

解释我的问题是：如何将某些html放在我网站的所有页面中而不必强制执行？

感谢所有帮助。

感谢您的帮助。

Answer 1

如果你想在多个页面上添加相同的项目，而不是一遍又一遍地编写相同的代码，你可以将它作为一个单独的文件，include在你想要的每个页面上使用PHP。我知道这不是HTML或CSS的方式，但如果这是你想做的事情，这是我能想到的最佳方式。

如果您以前没有使用过PHP，可能会发现本教程视频有关拆分模板和使用PHP包含不同的项目。

https://www.youtube.com/watch?v=p2JNbMpF1O4

Answer 2

使用此：Load html into div without changing the rest of page

然后使用Jquery

切换div的可见性

这是你在找什么？

Answer 3

这取决于您使用的框架。在ASP.NET MVC中，我使用了一个名为Partial Views的很好的功能，它就像一个函数。您可以随时在HTML页面中调用它。如果它是一个静态网站，您唯一的希望是在每个页面中复制该div。无论如何，你不能用HTML和CSS做到这一点。

Answer 4

喜欢看初学者教程？只需向下滚动一下！

你可以用php做这样的事情（就像一个例子 - 如果你是webdev的新手，这对你来说应该是可能的。）

假设您有一个代码段：<nav><a href="page1">page1</a><a href="page2">page2</a></nav> 和一个片段：<footer>copyright by computerquest</footer>

这些摘要在您的案例中是一致的 - 因此他们不会在每个网站上进行更改现在你只需将每个片段放入一个文件中 - 让我们说＆＃34; nav.html＆＃34;和＆＃34; footer.html＆＃34;。

现在您可以像这样创建特定网站：

<?php include "nav.html"; ?>
<div>your content page1</div>
<?php include "footer.html"; ?>

此页面保存为page1.php，下一页保存为page2.php。

<?php include "nav.html"; ?>
<div>your content page2</div>
<?php include "footer.html"; ?>

结果将作为后续代码 - page1：

<nav><a href="page1">page1</a><a href="page2">page2</a></nav>
<div>your content page1</div>
<footer>copyright by computerquest</footer>

和第2页：

<nav><a href="page1">page1</a><a href="page2">page2</a></nav>
<div>your content page2</div>
<footer>copyright by computerquest</footer>

所以这就是你要求的结果。

注意：这不是解决方案，而是一个（如果你是webdev的新手，可能是一个非常聪明的解决方案）！

希望它有所帮助：）

编辑（TUT）：

通过阅读评论我知道这个问题的作者是javascript和PHP的新手。

所以我认为指出有关不同技术的一些事情非常重要！
顺便说一句：只有当你关注搜索引擎优化和那些已经禁用了js的人时，这才真正重要。

我们走了...... 让我们假设您有两个不同的类别：＆＃34; home＆＃34;和＆＃34; myService＆＃34;。

如果您决定按照链接指向的解决方案（从标记为已接受的答案）我将关注以下问题。
如果你想像一个站点应用程序一样交付你的网站（所以你有＃34; home.html＆＃34;它显示了home和myService这两个类别）你希望通过动态加载来自的内容来实现这一点使用 javascript 将myService转换为home.html（顺便说一下：一般来说真是个好主意） - 任何不使用javascript的人都无法访问内容为myService！

但是嘿： searchengines不使用javascript - 所以Google（例如）不会知道关于myService的内容。

如何管理？

要处理此，您必须拥有2个物理网站（home.html和myService.html）。它们必须完成标记，包括头部和所有内容。当然，通过从<head>等不需要的标记中提取内容，将内容从一个站点加载到另一个站点仍然不是什么大问题。例如：jQuery('#content-container').load( "myService.html #content-container" );。但是现在，不必重写每个站点（例如页脚）的一致部分的优势/ 方法完全是从搜索引擎优化的角度来看的＃34;这将是理想的。
您必须拥有1个实体网站，但内容中包含所有可用内容。现在您拥有了所有内容，只需按需隐藏/显示不需要/想要的内容。例如：jQuery('.content').hide().filter('#myservice').show()。但一方面维持这可能会让人非常困惑取决于内容的数量以及＆＃34; SEO-point-view＆＃34;这不太理想，因为你的内容现在不太具体。

结论

我会说：＆＃34; yepp - 有更好的方法！＆＃34; 。
如果您是webdevelopment的新手，我强烈建议先开始学习"server-side scripting language"（例如PHP），然后再学习"client-side scripting language"（例如javascript）。

学习PHP的基础非常简单，你也可以很快开始学习javascript。

野生动物

这里我们提供一个很好的解决方案，结合PHP（以一种非常简单的方式）和javasrcipt库jQuery：

在一开始我们首先考虑哪些元素是一致的，哪些元素是动态的。

一致：导航栏，页脚，一些核心标记元素
动态：网站特定内容

好的，让我们先来制作一个＆＃34; template.php＆＃34; （它是一个必须保存的文件）：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- dynamic element --><title><?php echo $stitle; ?></title>
        <style>#active{font-size: 1.5em;cursor: text}</style>
    </head>
    <body>
        <nav>
            <?php # highlight active navigation dynamically: id="active"
            if     ($ssite === "home")
                echo '<a href="home.php" id="active">home</a><a href="myservice.php">service</a>';
            else
                echo '<a href="home.php">home</a><a href="myservice.php" id="active">service</a>';
            ?>
        </nav>
        <div id="content">
<?php include 'template.content.php'; ?><!-- dynamic element -->
        </div>
        <footer>
            (c) by computerquest
        </footer>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
            window.jquery || document.write('<script src="jquery-1.11.1.min.js"><\/script>');
            window.sSite = '<?php echo $sSite; ?>'; // "transfer" active site from php to javascript
        </script>
        <script src="main.js"></script>
    </body>
</html>

现在我们制作2个文件（每个网站1个）
＆＃34; home.php＆＃34;：

<?php
# set sites id
$sSite    = "home";
# set sites title
$sTitle   = "Welcome Home";
# set sites content
$sContent = 'Here we go with the dynamic site specific content of page: "home.php"...';
# include the hole template for deliviring a hole site or just the subtemplate when its requested by ajax
include isset( $_POST["sAjaxSite"] ) ? "template.content.php" : "template.php";
?>

＆＃34; myservice.php＆＃34;：

<?php
$sSite    = "myservice";
$sTitle   = "My Service";
$sContent = 'Here we go with the dynamic site specific content of page: myservice.php"...';
include isset( $_POST["sAjaxSite"] ) ? "template.content.php" : "template.php";
?>

所以到目前为止，我们可以提供2个特定的物理站点，从观点SEO和可访问性 非常好，但是具有智能且易于维护的开发环境因为如果你想创建一个新网站，你唯一需要做的就是制作一个新的＆＃34; file.php＆＃34;：

<?php $sSite = "file"; $sTitle = "New Site"; $sContent = 'Here we go with the dynamic site specific content of page: "file.php"...'; include isset( $_POST["sAjaxSite"] ) ? "template.content.php" : "template.php"; ?>

并在template.php中更新导航栏：

[...] <nav> <?php # highlight active navigation dynamically: class="active" if ($sSite = "home") echo '<a href="home.php" id="active">Home</a><a href="myservice.php">Service</a><a href="file.php">New</a>'; elseif ($sSite = "mySevice") echo '<a href="home.php">Home</a><a href="myservice.php" id="active">Service</a><a href="file.php">New</a>'; else echo '<a href="home.php">Home</a><a href="myservice.php">Service</a><a href="file.php" id="active">New</a>'; ?> </nav> [...]

看起来就像你在一开始就要了解PHP的所有内容一样！

$ setVariables =＆＃34; simple＆＃34;;

$ getVariables = $ setVariables;

回显 $ variables;

包含＆＃34; files-is-so-easy-in.php＆＃34;;

条件语句 if（is_nessecary === TRUE）{＆＃34;此处我们去＃34 ;; }其他{＆＃34;让它成为＆＃ 34 ;; } 或 is_nessecary ===是吗？＆＃34;我们走了＃34; ：＆＃34;让它成为＆＃34;;

这真的是在这个PHP场景中，除了告诉服务器何时开始解析<?php以及何时停止解析?> ......

那么我们还需要什么呢？＆＃34;每个人都想要一个不错的单站点应用程序＆＃34; - 所以我们这样做（jQuery方式）并创建一个文件＆＃34; main.js＆＃34;：

(function() { jQuery(window).ready(function() { var aSite = ['home', 'myservice', 'file']; // the only line that have to be updated when sites structure changes var sSiteAct = window.sSite; // assigned on the bottom of template.php (window.sSite = '<?php echo $sSite;?>') // #3 navigate without leaving the current side var fNavigate = function(oEvent) { jClicked = jQuery(oEvent.target); sHref = jClicked.attr('href'); if (sSiteAct !== sHref) // only do something if clicked element isn't that one thats currently active { jNav.filter('#active').attr('id', ''); jClicked.attr('id', 'active'); jContent.hide().filter('#' + sHref.substr(0, sHref.lastIndexOf('.'))).show(); sSiteAct = sHref; } }; // #2 append sContent (sContent is all the content containers loaded via ajax) var jNav = jQuery('nav a'); var jContent = {}; var sContent = ''; var fInitiateNavigation = function(sContent) { jQuery('#content').append(sContent); jContent = jQuery('.content'); // get all content containers as so to say "jQuery DOM objects" jNav.click(function(oEvent) // listen to click event { fNavigate(oEvent); return false; // prevent default behavior of <a>-tags }); jNav.filter('#active').click(); // trigger click event | SA "#3" }; // #1 startup with loading all content containers via ajax into sContent var i = aSite.length; var iNotLoaded = i; while (--i !== -1) { sSite = aSite[i]; if (sSite !== sSiteAct) { jQuery.post(sSite + '.php', { sAjaxSite : sSite }).done(function(sAjaxResponse) { sContent += sAjaxResponse; if (--iNotLoaded === 0) { fInitiateNavigation(sContent); } }); } else if (--iNotLoaded === 0) { fInitiateNavigation(sContent); } } }) } ).call(this);

多数民众赞成！如果您遵循上述概念的原则，jQuery代码段应该始终如预期的那样工作。这些原则非常简单：具有特定网站内容的容器始终包含class=".content"和id="filename without extension"。

当你不熟悉时，上面的jQuery部分看起来很混乱。但那不是重点。当然，你必须首先学习与之相处。但是如果你仔细看看PHP部分，你会发现它非常简单没有太多的努力，你有一个坚实的基础来提高你的webdev技能＆＃34;客户端的东西＆＃34;应该建立在我认为的之上。因为这将有助于您关注内容本身，这是SEO的一个重要事实。不要忘记搜索引擎不会像看到客户端网站操作结果的人那样看到您的内容。

您可以越多地关注网站特定内容的质量越好（不要将其视为教条，但请记住）。这就是模板系统的一个优点。

请不要忘记我总是尝试使用一种非常简单的措辞，因为这是针对初学者的。：）

Answer 5

您可以使用外部JavaScript文件（例如＆＃34; yourFile.js＆＃34;）执行此操作，该文件应如下所示：

window.yourText = 'Questo testo va nella div';

使用<head> - 标记在<script> - 代码中的所有html文件中包含此文件：

<script type="text/javascript" src="yourFile.js"></script>

并在所有html页面中添加以下代码：

<div><script>document.write(window.yourText);</script></div>

这是一种不重复自我的简单方法。

享受您的代码！

如何在更多页面中放置div

5 个答案:

喜欢看初学者教程？只需向下滚动一下！

编辑（TUT）：