Question

好吧，我开始写这个网页了，我遇到了一些我无法找到答案的问题。

我所拥有的代码的基本思想是：

当鼠标在“探索网页”上时打开菜单
鼠标悬停时菜单“链接”突出显示
当用户点击菜单项时，菜单会移至页面顶部，“链接”会一直保持突出显示，直到用户点击其他链接为止。
当菜单移到顶部时，会在下方打开div，显示该部分的内容。

我有两个主要问题。首先，每当我点击菜单项时，它都不会保持高亮显示（数字3）。其次，点击后（数字4），div不会在菜单下面打开。我非常感谢对这些问题的任何见解。

我包含了我的所有代码，因为我认为这些代码都与我的问题有关。

<!DOCTYPE html>
<html>
<head>
<style>
body
{
    background-color: #000000;
}
#container
{
    z-index: -1;
    background: #000000;
    width: 900px;
    height: 900px;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -450px;
}
#explore
{
    z-index: 1;
    background: #000000;
    width: 300px;
    height: 150px;
    position: absolute;
    top: 41.666%;
    left: 33.333%;
    opacity: 1;
}

#explore-text
{
    z-index: 1;
    color: #eb56bd;
    font-size: 50px;
    font-family: sans-serif;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 5px;
    left: 0%;
    opacity: 1;
}
.title
{
    z-index: 2;
    width: 300px;
    height: 150px;
    text-align: center;
    font-size: 60px;
    font-family: sans-serif;
    font-weight: bold;
    color: #000000;
    display: none;
}
#news
{
    background: #eb56bd;
    position: absolute;
    top: 41.666%;
    left: 33.333%;
}
#about
{
    background: #eb56bd;
    position: absolute;
    top: 41.666%;
    left: 0%;
}
#events
{
    background: #eb56bd;
    position: absolute;
    top: 41.666%;
    left: 66.666%;
}
.content
{
    z-index: 0;
    background: #b0408d;
    width: 900px;
    position: absolute;
    top: 21.666%;
    left: 0px;
    height : 900;
}
#news-content
{
    display: none;
}
#about-content
{
    display: none;
}
#events-content
{
    display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="explore" onmouseover="overExplore()" onmouseout="outExplore()">
<div id="explore-text">Explore Webpage</div>
</div>
<div id="news" class="title" onmouseover="overTitle(news)" onmouseout="outTitle(news)" onclick="titleClick(news)">news</div>
<div id="about" class="title" onmouseover="overTitle(about)" onmouseout="outTitle(about)" onclick="titleClick(about)">about</div>
<div id="events" class="title" onmouseover="overTitle(events)" onmouseout="outTitle(events)" onclick="titleClick(events)">events</div>
<div id="news-content" class="content">

</div>
<div id="about-content" class="content">

</div>
<div id="events-content" class="content">

</div>
</div>
<script>
var titleClicked = false;
var isClicked;
var newsContent = document.getElementById('news-content');
var aboutContent = document.getElementById('about-content');
var eventsContent = document.getElementById('events-content');
var title = document.getElementsByTagName('title');
var news = document.getElementById('news');
var about = document.getElementById('about');
var events = document.getElementById('events');
var explore = document.getElementById('explore');
var exploreText = document.getElementById('explore-text');
function overExplore() {
    explore.style.width="900px";
    explore.style.left="0%";
    explore.style.background="#eb56bd";
    explore.style.cursor="pointer";
    explore.style.cursor="hand";
    explore.style.opacity="0";
    news.style.display="block";
    about.style.display="block";
    events.style.display="block";
}
function outExplore() {
    explore.style.width="300px";
    explore.style.left="33.333%";
    explore.style.background="#000000";
    exploreText.style.left="0%";
    exploreText.style.top="5px";
    explore.style.opacity="1";
    news.style.display="none";
    about.style.display="none";
    events.style.display="none";
}

function overTitle(div) {
    if (div!= isClicked) {
        div.style.background="#b0408d";
    }
    if (titleClicked == false) {
    div.style.display="block";
    news.style.display="block";
    about.style.display="block";
    events.style.display="block";
    }
    explore.style.cursor="pointer";
    explore.style.cursor="hand";
}
function outTitle(div) {
    if (div!= isClicked) {
        div.style.background="#eb56bd";
    }
    if (titleClicked == false) {
        div.style.display="none";
        news.style.display="none";
        about.style.display="none";
        events.style.display="none";
    }
}
function titleClick(div) {
    div.style.background="#b0408d";
    var isClicked = div;

    if (div == news) 
    {
        about.style.background="#eb56bd";
        events.style.background="#eb56bd";
        newsContent.style.display="block";
        aboutContent.style.display="none";
        eventsContent.style.display="none";
    }
    else if (div == about)
    {
        news.style.background="#eb56bd";
        events.style.background="#eb56bd";
        newsContent.style.display="none";
        aboutContent.style.display="block";
        eventsContent.style.display="none";

    }
    else
    {
        news.style.background="#eb56bd";
        about.style.background="#eb56bd";
        newsContent.style.display="none";
        aboutContent.style.display="none";
        eventsContent.style.display="block";
    }
    explore.style.top="5%";
    news.style.top="5%";
    about.style.top="5%";
    events.style.top="5%";
    titleClicked=true;
}
</script>    
</body>
</html>

非常感谢你的帮助。

第二个问题：当我指向菜单中的文字时，如何防止光标从指针改变？

再次感谢！

Answer 1

您应该使用css类来设置菜单链接的样式：

.selected{background:rgb(176, 64, 141);}

单击菜单链接后，将所选类应用于该菜单链接

function titleClick(div) {
   //div.style.background="#b0408d";
   div.className='selected';
   var isClicked = div;

接下来，您需要从其他菜单链接中清除“已选择”类，以便不再选择它们，例如：

about.className="";
events.className="";

不使用鼠标悬停和鼠标输出来设置菜单链接的样式，而是使用css：hover：

#news:hover{
    background:"#eb56bd";
}

至于div没有显示，我猜它是因为div是空的。我已经填写了一些随机文本，它确实显示了。

Answer 2

我从未设法让伪类（如:hover）按照您想要的方式运行。如果你可以使用jQuery，你可以在菜单类中添加一个click函数：

$('.title').click(function() {
$('.title').css({'background':'#eb56bd'});
$(this).css({'background':'#b0408d'});
});

首先将所有背景设置为未单击的颜色，然后将突出显示颜色应用于单击的项目。这可以确保在您单击其他项目时，之前单击的项目已删除突出显示。

JSFiddle

鼠标悬停后Div改变，Div不显示

2 个答案: