Question

这可能是一些简单的事情，但我是一个使用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>

Answer 1

首先，您应该将导航保留在body标记内。

话虽如此 - 填充不会影响身体，因为你正在瞄准nav03 ID。

相反，定位＆＃34; main＆＃34; ID：

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

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

Fiddle

修改

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

使用Javascript添加侧边栏并更改某些HTML页面上的填充

1 个答案: