0

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

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

  1. 鼠标在“浏览网页”上时打开菜单
  2. 鼠标悬停时菜单“链接”突出显示
  3. 当用户单击菜单项时，菜单将移动到页面顶部，并且“链接”保持突出显示，直到用户单击不同的链接。
  4. 当菜单移到顶部时，下面会打开一个 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>

非常感谢你的帮助。

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

再次感谢！

4

2 回答 2

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="";

不要使用 mouseover 和 mouse out 来设置菜单链接的样式，而是使用 css :hover 代替：

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

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

于 2013-11-10T04:38:54.687 回答
1

我从来没有设法让伪类（如:hover）按照你想要的方式行事。如果可以使用jQuery，可以在菜单类中添加点击功能：

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

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

JSFiddle

于 2013-11-10T08:02:11.267 回答