gpt4 book ai didi

jquery - 在页面上时突出显示选定的菜单项

转载 作者:太空宇宙 更新时间:2023-11-04 13:41:29 25 4
gpt4 key购买 nike

所以这让我疯狂了一整天,我只想在相应页面上突出显示当前 li,

请原谅我的困惑,但这是我的代码,

HTML

<div id="layout">
<!-- Menu toggle -->
<a href="#menu" id="menuLink" class="menu-link active">
<span></span>
</a>
<div id="menu">
<div class="pure-menu pure-menu-open">
<a class="pure-menu-heading" href="pure.html">Nathaniel Harman</a>
<ul class="nav">
<li>
<a href="software.html">
<span class="icon-macintosh" style="vertical-align: middle"></span>SOFTWARE</a>
</li>
<li>
<a href="frameworks.html">
<span class="icon-painting-roll-streamline" style="vertical-align: middle"></span>FRAMEWORKS</a>
</li>
<li>
<a href="lang.html">
<span class="icon-ink-pen-streamline" style="vertical-align: middle"></span>LANGUAGES</a>
</li>
<li>
<a href="projects.html">
<span class="icon-crop-streamline" style="vertical-align: middle"></span>PROJECTS</a>
</li>
<li>
<a href="exp.html">
<span class="icon-monocle-mustache-streamline" style="vertical-align: middle"></span>EXPERINECE</a>
</li>
<li>
<a href="production.html">
<span class="icon-design-graphic-tablet-streamline-tablet" style="vertical-align: middle"></span>IN PRODUCTION</a>
</li>
<li>
<a href="development.html">
<span class="icon-barista-coffee-espresso-streamline" style="vertical-align: middle"></span>IN DEVELOPMENT</a>
</li>
<li>
<a href="contact.html">
<span class="icon-map-streamline-user" style="vertical-align: middle"></span>CONTACT</a>
</li>
</ul>

CSS

#menu {
margin-left: -200px; /* "#menu" width */
width: 200px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000; /* so the menu or its navicon stays above all content */
background: #191818;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}

#menu a {
color: #999;
border: none;
padding: 0.6em 0 0.6em 0.6em;
}


#menu .pure-menu,
#menu .pure-menu ul {
border: none;
background: transparent;
}


#menu .pure-menu ul,
#menu .pure-menu .menu-item-divided {
border-top: 1px solid #333;
}

#menu .pure-menu li a:hover,
#menu .pure-menu li a:focus,
#menu .pure-menu span:hover{
background: #333;
color:#fff;
}


#menu .pure-menu-selected,
#menu .pure-menu-heading {
background: #909090;
}
#menu .pure-menu-selected a {
color: #fff;
}

#menu .pure-menu-heading {
font-size: 110%;
color: #fff;
margin: 0;
}

.menu-link {
position: fixed;
display: block; /* show this only on small screens */
top: 0;
left: 0; /* "#menu width" */
background: #000;
background: rgba(0,0,0,0.7);
font-size: 10px; /* change this value to increase/decrease button size */
z-index: 10;
width: 2em;
height: auto;
padding: 2.1em 1.6em;
}

.menu-link:hover,
.menu-link:focus {
background: #000;

}

.menu-link span {
position: relative;
display: block;
}

.menu-link span,
.menu-link span:before,
.menu-link span:after {
background-color: #fff;
width: 100%;
height: 0.2em;
}

.menu-link span:before,
.menu-link span:after {
position: absolute;
margin-top: -0.6em;
content: " ";
}

.menu-link span:after {
margin-top: 0.6em;
}

任何帮助都会很棒我不知道我哪里出错了,正如你所看到的我正在使用纯 CSS 框架

最佳答案

最简单的方法是创建一个类,假设为 current,并将其分配给每个单独页面上的 li 元素。例如,您的 software.html 文件将如下所示:

<li class="current">
<a href="software.html">
<span ...></span>SOFTWARE</a>
</li>
<li>
<a href="frameworks.html">
<span ...></span>FRAMEWORKS</a>
</li>

虽然您的 frameworks.html 文件看起来像这样:

<li>
<a href="software.html">
<span ...></span>SOFTWARE</a>
</li>
<li class="current">
<a href="frameworks.html">
<span ...></span>FRAMEWORKS</a>
</li>

然后根据 .current 设置相应的样式

关于jquery - 在页面上时突出显示选定的菜单项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22696836/

25 4 0