Javascript 如何通过突出显示相应的导航栏部分来制作导航栏，告诉您在网站上的位置？
好的。首先，我的问题似乎以前被问过一次。但是我查看了太多的stackoverflow问题和答案，其中没有一个是我想要的，或者它们不起作用，或者它们专门回答了提问者的代码，但对我的代码不起作用 所以我想知道如何制作一个脚本，它将一个名为“active”的类添加到导航栏中的“a”元素中，该元素与页面上的位置相对应。假设您正在查看id为“Poem1”的div，则导航栏中的Poem1部分将高亮显示（由于css中活动的类的样式），而在url栏中，链接的末尾将发生更改，以便id位于末尾。为了进一步解释这一点，这里有一个例子：htps://What Ever.html#Poem1。请注意url末尾的id是如何显示的，我希望根据用户在网站上查看的div来更改该端点id 还有一个旁注：我做了一个导航条，当≡" 单击，然后在单击“×”时消失 这是我的密码：Javascript 如何通过突出显示相应的导航栏部分来制作导航栏，告诉您在网站上的位置？,javascript,html,css,web,navbar,Javascript,Html,Css,Web,Navbar,好的。首先，我的问题似乎以前被问过一次。但是我查看了太多的stackoverflow问题和答案，其中没有一个是我想要的，或者它们不起作用，或者它们专门回答了提问者的代码，但对我的代码不起作用 所以我想知道如何制作一个脚本，它将一个名为“active”的类添加到导航栏中的“a”元素中，该元素与页面上的位置相对应。假设您正在查看id为“Poem1”的div，则导航栏中的Poem1部分将高亮显示（由于css中活动的类的样式），而在url栏中，链接的末尾将发生更改，以便id位于末尾。为了进一步解释这一点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<script src="Unit11.js"></script>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.dimensions.js" type="text/javascript"></script>
<script src="jquery.viewport.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="Unit11.css" type="text/css"/>
<link rel="icon" href="logo.ico" type="image/x-icon">
<title> Unit 11 - Poetry Creative Interpretation (Evaluation) </title>
</head>
<body onload="welcome()">
<span id="navBar" class="navBar">
<ul class="nav" id="nav">
<li> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> </li>
<li> <a href="#Intro" id="start"> Intro </a> </li>
<li> <a href="#Poem1" id="tab"> Poem#1 </a> </li>
<li> <a href="#Poem2" id="tab2"> Poem#2 </a> </li>
<li> <a href="#Comparision" id="compare"> Comparision </a> </li>
<li> <a href="#About" id="info"> About </a> </li>
</ul>
</span>
<span onclick="openNav()" id="open">≡</span>
<div id="Intro" class="Content">
<h1 class="special"> Intro </h1>
<hr/>
<p>
Both of the poems we will be discussing are written by Robert Lee Frost. "Nothing Gold can Stay" </br> <img src="Frost.jpg" alt="Robert Frost" id="image3">
was written for a book called "The Outsiders" by S. E. Hinton. Robert Frost was an American poet, </br>
but his work was initially published in England before it was published in America. He had a very </br>
successful poetry career, he was awarded four Pulitzer Prizes for Poetry, the Congressional Gold Medal </br>
in 1960, and he was named Poet Laureate of Vermont the year after. It may seem like Robert Frost's life </br>
was full of joy, but that's definitely not the case. There was actually a devastating dark side to </br>
Robert Frost's life. Robert Frost was born to an alcoholic father who died of tuberculosis when Frost </br>
was 11 and to a depressed mother. His sister was put into a mental hospital and so was his daughter Irma. </br>
His son Carol committed suicide. His daughter Elinor died during days after her birth and his daughter </br>
Marjorie died while giving birth. His son Elliot died of cholera. Out of his 6 children only Lesley was </br>
completely fine, she and Irma outlived their father. </br>
</p>
</div>
<div id="Poem1" class="Content">
<h1> Poem 1 </h1>
<hr/>
<article>
<h2> The Road Not Taken </h2>
<p>
Two roads diverged in a yellow wood, <br/> <img src="TRNTimagery.jpg" alt="Poem Imagery" id="image2">
And sorry I could not travel both <br/>
And be one traveler, long I stood <br/>
And looked down one as far as I could <br/>
To where it bent in the undergrowth; <br/>
<br/>
Then took the other, as just as fair, <br/>
And having perhaps the better claim, <br/>
Because it was grassy and <mark class="pers" title="Personification"> wanted</mark> wear; <br/>
Though as for that the passing there <br/>
Had worn them really about the same, <br/>
<br/>
And both that morning equally lay <br/>
In leaves no step had trodden black. <br/>
Oh, I kept the first for another day! <br/>
Yet knowing how <mark class="rep" title="Repitition"> way</mark> leads on to <mark class="rep" title="Repitition"> way</mark>, <br/>
I doubted if I should ever come back. <br/>
<br/>
I shall be telling this with a sigh <br/>
Somewhere <mark class="rep" title="Repitition"> ages</mark> and <mark class="rep" title="Repitition"> ages</mark> hence: <br/>
Two roads diverged in a wood, and I— <br/>
I took the one less traveled by, <br/>
And that has made all the difference. <br/>
</p>
</article>
<aside>
By Robert Frost, 1874 - 1963 <br/>
Written in 1916
</aside>
</div>
<div id="Poem2" class="Content">
<h1> Poem 2 </h1>
<hr/>
<article>
<h2> Nothing Gold Can Stay </h2>
<p>
Nature’s first green is gold, <br/> <img src="NGCSimagery.jpg" alt="Poem Imagery" id="image">
<br/>
<mark class="pers" title="Personification"> Her</mark><mark class="alit" title="Alliteration"> hardest hue to hold.</mark> <br/>
<br/>
<mark class="pers" title="Personification"> Her</mark> early leaf’s a flower; <br/>
<br/>
But only so an hour. <br/>
<br/>
Then <mark class="rep" title="Repitition"> leaf</mark> subsides to <mark class="rep" title="Repitition"> leaf.</mark> <br/>
<br/>
<mark class="alus" title="Allusion"> So Eden sank to grief,</mark> <br/>
<br/>
So <mark class="con" title="Contrast"> dawn</mark> goes down to <mark class="con" title="Contrast"> day.</mark> <br/>
<br/>
Nothing gold can stay. <br/>
</p>
</article>
<aside>
By Robert Frost, 1874 - 1963 <br/>
Written in 1923
</aside>
</div>
<div id="Comparision" class="Content">
<h1> Comparitive Poem Reflection </h1>
<hr/>
<article>
<p>
Both of the poems are written by Robert Frost and therefore share many of the same themes and literary devices. Most notably, they share a theme of Man and Nature. For example in “The Road Not Taken” nature is used as a metaphor for the speaker's life. In the poem Frost compares making major decisions to encountering two different paths while lost in a forest. Meanwhile, in “Nothing Gold Can Stay” nature is used as a metaphor for the speaker's perception of life. Gold is a metaphor for innocence and youth, green is a metaphor for life at its fullest just like when the tree’s leaves become green during spring time, and nature is a metaphor for life. This theme of Man and the Natural World is a very reoccurring trend in Frost's poems. Metaphor is not the only literary device both poems utilize, they also both utilize personification and repetition. In “Nothing Gold Can Stay” personification is used when Frost refers to nature as a “Her” e.g. “Her hardest hue to hold / Her early leaf’s a flower” (Frost 2-3). In “The Road Not Taken” personification is used when Frost implies that the road has desires (just as we humans do) i.e. “Because it was grassy and wanted wear” (Frost 8). Repetition is also used in both poems; “Then leaf subsides to leaf” (“Nothing Gold Can Stay” 5), “leaf” is being repeated. “Somewhere ages and ages hence” (“The Road Not Taken” 17), “ages” is being repeated. However, both poems do not share the same style or structure. For instance “The Road Not Taken” is much longer (but still an average sized poem), consisting of four stanzas with five lines each (or four quintains). The rhyme scheme for “The Road Not Taken” is ABAAB. This is much different from “Nothing Gold Can stay” which has an AABBCCDD rhyme scheme. Also, “Nothing Gold Can Stay” is a relatively short poem and it really only has one stanza.
</p>
</article>
</div>
<div id="About" class="Content">
<h1> About </h1>
<hr/>
<p> Made By: Zaid Alnemer </br>
Contact me at: zalnemer2287@hwdsb.on.ca </br>
<aside id="disclaimer">
*Not made using wix.com or other online tools that help make a website for you* </br>
*Made completely from scratch using a text editor (Notepad++ etc.)*
</aside>
</p>
</div>
<script>
</script>
</body>
</html>
您只需要在用户单击锚定标记时切换类 例如 您可能需要为此创建一个函数
≡
简介
我们将要讨论的两首诗都是罗伯特·李·弗罗斯特写的，“没有金子可以留下来”
罗伯特·弗罗斯特是美国诗人
但他的作品最初在英国出版，后来才在美国出版
在成功的诗歌生涯中，他获得了四项普利策诗歌奖、国会金质奖章
1960年，他被评为佛蒙特州桂冠诗人，第二年，这似乎是罗伯特·弗罗斯特的一生
他充满了喜悦，但事实并非如此。事实上，他有着毁灭性的黑暗面
罗伯特·弗罗斯特出生于一个酗酒的父亲，他在弗罗斯特去世时死于肺结核
他11岁时被送到一位抑郁的母亲那里。他的妹妹被送进了精神病院，他的女儿厄玛也被送进了精神病院
他的儿子卡罗尔自杀了。他的女儿埃莉诺在她出生后的几天里去世了，他的女儿也死了
马乔里在分娩时死亡。他的儿子埃利奥特死于霍乱。在他的6个孩子中只有莱斯利
很好，她和Irma比他们的父亲活得长
诗1
这条路没有走
两条路在一片黄色的树林中分叉，
很抱歉我不能同时旅行
做一个旅行者，我站了很久
然后尽我所能向下看了一眼
到它在灌木丛中弯曲的地方；
然后选择了另一个，同样公平，
而且可能有更好的说法，
因为那里长满了草
女装；
不过关于那件事
他们穿的差不多，
那天早上，两人都平躺在床上
在树叶上没有脚步踩黑。
哦，我把第一个留到另一天！
还不知道怎么做
通往
方法
我怀疑自己是否会回来。
我会叹口气说出来
某处
老年人
年龄：
树林里分出两条路，我-
我选了一个人迹罕至的，
这让一切都不同了。
罗伯特·弗罗斯特著，1874-1963年
写于1916年
诗2
黄金难留
大自然的第一道绿色是金色，
她
最难把握的色调。
在这里，叶子是一朵花；
但只有一个小时。
那么
叶落
叶
于是伊登陷入了悲痛之中，
所以
逐渐下降到
白天
任何黄金都留不住。
罗伯特·弗罗斯特著，1874-1963年
写于1923年
比较诗反思
这两首诗都是罗伯特·弗罗斯特写的，因此有许多相同的主题和文学手法。最值得注意的是，它们都有一个关于人与自然的主题。例如在《未走的路》中，自然被用作说话者生活的隐喻。
在这首诗中，弗罗斯特将做出重大决定比作在森林中迷路时遇到两条不同的道路。同时，在《黄金难留》中，大自然被用作说话者对生命感知的隐喻。黄金是天真的隐喻
青春，绿色是对生命的最充分的隐喻，就像春天树叶变绿一样，大自然是对生命的隐喻。弗罗斯特诗歌中关于人与自然世界的主题是一种反复出现的趋势。隐喻
这不是两首诗使用的唯一的文学手段，它们也都使用拟人化和重复。在“没有金子可以留下”中，当弗罗斯特将大自然称为“她”，例如“她最难把握的色调/她早叶的颜色”时，使用拟人化
一朵花”（弗罗斯特2-3）。在“未走之路”中，当弗罗斯特暗示道路有欲望时，使用拟人化
body {
background: #c5d8e2;
padding: 0;
margin: 0;
}
div {
margin-left: 5.5%;
transition: margin-left .5s;
padding: 20px;
}
h1 {
padding-top: 10px;
padding-bottom: 0;
margin-top: 10px;
margin-bottom: 0;
font-size: 35px;
}
h2 {
font-size: 25px;
}
h1.special {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
p {
font-size: 21px;
}
aside {
font-size: 18px;
}
#image {
position: relative;
float: right;
top: -50px;
}
#image2 {
position: relative;
float: right;
top: -50px;
height: 360px;
width: 700px;
}
#image3 {
position: relative;
float: right;
top: -20px;
height: 318px;
width: 242px;
}
#open {
height: 100%;
padding: 1.5%;
font-size: 80px;
color: orange;
background-color: #f1f1f1;
display: block;
position: fixed;
}
#disclaimer {
font-weight: bold;
font-size: 20px;
}
.alit {
background-color: #FFFF00;
}
.con {
background-color: #0000FF;
}
.rep {
background-color: #00FF00;
}
.alus {
background-color: #FF0000;
}
.pers {
background-color: #FF6000
}
.navBar {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #555; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
.nav {
list-style-type: none;
margin: 0;
padding: 0;
}
viewer = prompt('What is your name?')
if (viewer != "") {
alert('Welcome ' + viewer)
} else {
alert('Please enter a name next time!')
}
}
/* Set the width of the side navigation to 250px and the left margin of the page content to 250px */
function openNav() {
document.getElementById("navBar").style.width = "15%";
document.getElementById("Intro").style.marginLeft = "15%";
document.getElementById("Poem1").style.marginLeft = "15%";
document.getElementById("Poem2").style.marginLeft = "15%";
document.getElementById("Comparision").style.marginLeft = "15%";
document.getElementById("About").style.marginLeft = "15%";
}
/* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("navBar").style.width = "0";
document.getElementById("Intro").style.marginLeft = "5.5%";
document.getElementById("Poem1").style.marginLeft = "5.5%";
document.getElementById("Poem2").style.marginLeft = "5.5%";
document.getElementById("Comparision").style.marginLeft = "5.5%";
document.getElementById("About").style.marginLeft = "5.5%";
}
var XFoo = document.registerElement('r-s');
document.body.appendChild(new XFoo());
// get all element
var nav = document.querySelectorAll('#nav a');
for (var i = 0; i < nav.length; i++) {
// assign each element a click event
nav[i].addEventListener('click', function(event) {
// when user click the anchor tag, remove the active class
var nav = document.querySelectorAll('#nav a');
for (var i = 0; i < nav.length; i++) {
nav[i].classList.remove('active');
}
// add active class to the clicked element
this.classList.add('active');
});
}