Question

我想知道是否有办法缩短我的HTML代码。我目前正在使用bootstrap来布局这个网页。

我的页面上的菜单在整个页面中重复，如果更新，则逐页更新。

是否有任何方法可以缩短整个HTML代码......

<div class="navbar navbar-fixed-top" role="navigation"
    <div class="container">
        ...
    </div>
<div>

...使用javascript或任何方式。

Answer 1

是的 - 你可以通过javascript完成。让我们假设您创建了包含在所有页面中的1个js文件：

<script language="javascript" src="/js/mymenu.js"></script>

如果您为菜单使用其他javascript或其他css文件，请确保在HEAD标记中包含mymenu.js文件之前的其他文件。

然后在你的mymenu.js文件中只有这样的代码：

var outerDiv = document.createElement("div");
outerDiv.setAttribute("class","navbar navbar-fixed-top");
outerDiv.setAttribute("role","navigation");
var innerDiv = document.createElement("div");
innerDiv.setAttribute("class","container");
outerDiv.appendChild(innerDiv);
document.body.appendChild(outerDiv);
...

确保主菜单的css使用position：absolute;或者不是做body.appendChild，而是将它附加到包含元素。

HTML - 减少HTML代码冗余

1 个答案: