使用 Javascript 在某些 HTML 页面上添加侧边栏和更改填充答案

【问题标题】：Using Javascript to add a sidebar and change padding on some HTML pages使用 Javascript 在某些 HTML 页面上添加侧边栏和更改填充
【发布时间】：2016-03-09 15:27:30
【问题描述】：

这可能是一些简单的事情，但我是一个完全不懂 javascript 的菜鸟，而且非常喜欢 HTML，所以我会很感激这个。

我有一个非常简单的网站，我托管在家庭服务器上，我在博客上介绍了我最喜欢的两个爱好；书籍和旅行。我正在使用我网站上所有页面引用的 CSS 进行布局，并且我有一个简单的 javascript，它添加了页脚和顶部导航菜单。我喜欢这种方法，因为它使将来向顶部导航窗格添加按钮变得非常简单，而无需触摸每个单独的页面。我想使用相同的方法向一些页面添加侧边栏，并且我已经成功地做到了。但是使用这种方法，我发现我需要将（仅）我添加侧边栏的那些页面的正文的填充调整多个像素，以便侧边栏不只是融合到正文中的文本/图像中。我想添加，

document.getElementById("nav03").style.padding = "5px 5px 5px 215px";

我的脚本可以解决问题，但我有点误会了。填充似乎影响了我的侧边栏，而不是我调用“nav03”的页面正文。理想情况下，我希望通过向页面添加“侧边栏”来进行填充更改，并且不必有两个单独的调用，但我将其拆分为 nav03 只是为了进行测试，以消除添加侧边栏的代码的可能性以某种方式干扰我的目标。下面是我的 CSS、javascript 和一个页面示例，如果有人能指出我正确的方向，我想添加侧边栏。我敢肯定，这可能不是添加侧边栏的最佳方式，但它对我来说很舒服，而且似乎将来可以像顶部导航菜单一样轻松地进行更改。

document.getElementById("foot01").innerHTML =
"<p>&copy;  " + new Date().getFullYear() + " codyfair.kicks-ass.net. All rights reserved.</p>";
document.getElementById("topnav").innerHTML =
"<ul id='topnav'>" +
"<li><a href='index.html'>Home</a></li>" +
"<li><a href='codystravels'>Cody's Travels</a></li>" +
"<li><a href='codyssietch'>The Sietch</a></li>" +
"<li><a href='codysworkshop'>The Workshop</a></li>" +
"</ul>"; 
document.getElementById("sidebar").innerHTML =
"<ul id='sidebar'>" +
"<li><a href='archivedhikes'>Archived Hikes</a></li>" +
"<li><a href='archivedreviews'>Archived Reviews</a></li>" +
"<li><a href='codyssietch'>The Sietch</a></li>" +
"<li><a href='codysworkshop'>The Workshop</a></li>" +
"</ul>";
document.getElementById("nav03").style.padding = "5px 5px 5px 215px";

body {
    font-family: "Lucida Sans Unicode", Verdana, sans-serif;
    font-size: 16px;
    background-color: dimgrey;
    color: #000000;
    padding: 3px;
}

a:link    {color:green; background-color:transparent; text-decoration:underline}
a:visited {color:dimgrey; background-color:transparent; text-decoration:none}
a:hover   {color:red; background-color:transparent; text-decoration:underline}
a:active  {color:yellow; background-color:transparent; text-decoration:underline}

#main {
    padding: 5px;
    padding-left:  15px;
	padding-right: 5px;
    background-color: linen;
    border-radius: 0 0 5px 5px;
}

h1 {
    font-family: Georgia, serif;
    border-bottom: 3px solid dimgrey;
    color: dimgrey;
    font-size: 30px;
}
h2 {
    font-family: Georgia, serif;
    color: dimgrey;
    font-size: 20px;
	
}
ul#topnav {
    padding: 0;
    margin-bottom: 11px;
}

ul#topnav li {
    display: inline;
    margin-right: 3px;
}

ul#topnav li a {
    background-color: linen;
    padding: 10px 20px;
    text-decoration: none;
    color: #696969;
    border-radius: 4px 4px 0 0;
}

ul#topnav li a:hover {
    color: white;
    background-color: black;
} 
ul#sidebar {
    position:absolute;
	top: 60px;
	left: 0;
	bottom: 0;
	height: 100%
}

ul#sidebar li {
    margin-right: 3px;
}

ul#sidebar li a {
    background-color: linen;
    text-decoration: none;
    color: #696969;
    border-radius: 0px 0px 0 0;
}

ul#sidebar li a:hover {
    color: white;
    background-color: black;
}

<!DOCTYPE html>
<html>

<head>
<title>The Sietch</title>
<link href="cfdesign.css" rel="stylesheet">
</head>

<nav id="topnav"></nav>
<nav id="sidebar"></nav>
<nav id="nav03"></nav>

<body>

<div id="main">

<h1>Currently Reading:</h1>

<p><img src="pics/reading.JPG" align="right"></p>

<p><a href="codyssietch"><i>Einstein: His Life and Universe</i> by Walter Isaacson</a>
    
<h1><a href="animalfarmreview">The Ten Books You Should Be Beaten For Not Having Read Yet</a></h1>

There are some books you encounter in life that are so moving, so relatable, that they touch you deeply, almost 
in the same way a special love would. In many cases you become so attached, that you are almost offended when others have not read these books, or worse yet, 
have never heard of them. I am easily offended in this regard, so check out my top ten list, and then go read them! Each book on this list is of course a solid 5 stars.
    
<h1>Recently Reviewed</h1>

<p>Click each title to read my review, and see my 1-5 star rating.</p>

<h2><a href="spqrreview"><i>S.P.Q.R. A History of Ancient Rome</i> by Mary Beard</a></h2>
<h2><a href="bobbyfischergoestowarreview"><i>Bobby Fischer Goes to War: How the Soviets Lost the Most Extraordinary Chess Match of All Time</i> by David Edmonds & John Eidinow</a></h2>
<h2><a href="thethreemusketeersreview"><i>The Three Musketeers</i> by Alexandre Dumas</a></h2>

<h1>Archived Reviews</h1> 
<p><a href="archivedreviews">Click Here for Archived Book Reviews by Year</a></p>

<footer id="foot01"></footer>
</div>

<script src="script.js"></script>

</body>
</html>

【问题讨论】：

如果我错了，有人纠正我，但你真的不应该把标记（特别是导航）放在正文之外。话虽这么说 - 如果我没有正确地关注你，你真的只需要将填充调整为
- 还是我错了？
我确实尝试在正文中移动导航调用，特别是填充，但这没有任何区别。我不想调整 CSS 中的填充，因为它会应用于所有页面，我只希望它在将具有侧边栏的页面上。
它可能不会，但您不想将这些元素保留在身体之外。我认为 HTML5 的工作方式会导致您自动生成一个额外的、嵌套的 body 标签。类似于this post上的答案

【解决方案1】：

首先，您应该真正将导航放在body 标签内。

话虽如此 - 填充不会影响正文，因为您的目标是 nav03 ID。

相反，定位“主要” id：

document.getElementById("main").style.padding = "5px 5px 5px 215px";

我相信这就是您正在寻找的结果：

Fiddle

编辑

这可能会影响所有页面 - 这不会是您正在寻找的结果。您可能希望将侧导航脚本保存在另一个文件中，并且仅将其包含在将呈现侧导航的页面中。

【讨论】：

丹，当我第一次看到你的回复时，我想你在编辑时所说的同样的话，这不会影响每一页吗？但是我试过了，不行，好像只影响加了sidebar nav标签的页面，所以完美！
就 body 标签内的 nav 调用而言，这会不会是一种面向未来的东西？我隐约知道 HTML5 即将问世，但我不确定它现在是否已经成为标准，或者很快就会成为标准，还是什么？它似乎在我目前测试过我的网站的每个浏览器上都可以正常工作，但如果这会在未来搞砸，我很想知道是否还有其他任何人看到的设计缺陷可能有一天会毁了我？非常感谢大家的帮助！
我会说这更像是一种过去的证明。现代浏览器会自动纠正这些问题，但是，旧浏览器并不那么聪明。一般的经验法则是，页面上显示的任何内容都应该包含在 body 标记中。
我明白了，谢谢你的提示！检查我的生产服务器后，一切都在我当前设置的主体内，我必须在测试时将它们移动到我的测试机器上，看看是否有任何不同。非常绿色，所以很多试验和错误——主要是错误，哈哈。我仍然有点不确定为什么定位“主要”ID似乎不会影响所有页面，因为它们都调用该脚本进行顶部导航......但它按我想要的方式工作，所以我不会看看嘴里的礼物马！
我想知道其他页面是否被缓存，这就是它当前显示正确的原因。我还在玩，因为我相信有一个我没有想到的 CSS 解决方案。但是，如果您确实受到了不利影响，您可以始终将 sidenav 代码保存在单独的脚本中。不理想 - 但仍然是一个解决方案。