Question

好的，我使用JavaScript更改了链接的外观。当我更改硬编码链接的内容时，它坚持认为当光标没有悬停在其上方时，更改的颜色和下划线保持不变。但是，当使用JavaScript更改DIV的内容时，样式更改不会粘贴。

以下是HTML代码：

<!doctype html>
<html>
<head>
<title>Bla bla</title>
<meta charset="UTF-8">
<link href="style/kim.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="scripts/Kim.js"></script>
</head>
<body>
<div class="wrapper">
  <div class="main">
    <div class="nav">
      <div class="topNav">
        <ul>
          <li onClick="changeNav('design')"><a href="#" id="design">Design</a></li>
          <li onClick="changeNav('code')"><a href="#" id="code">Programming</a></li>
          <li onClick="changeNav('science')"><a href="#" id="science">Science</a></li>
          <li onClick="changeNav('Kim')"><a href="#" id="Kim">Kim</a></li>
        </ul>
      </div>
      <div id="subNav"> 
        <script>changeNav("design");</script> 
      </div>
    </div>
    <div class="content">
      <p id="mainText">Test</p>
    </div>
  </div>
</div>
</body>
</html>

这是JS代码：

var topNavNames = ["design", "code", "science", "Kim"];
var subNavCode = ["<ul><li onClick=\"loadPHP('design/websites.php', 'sub0')\"><a href=\"#\" id=\"sub0\">Websites</a></li><li onClick=\"loadPHP('design/graphics.php', 'sub1')\"><a href=\"#\" id=\"sub1\">Graphics</a></li><li onClick=\"loadPHP('design/flash.php', 'sub2')\"><a href=\"#\" id=\"sub2\">Flash</a></li></ul>",
                "<ul><li onClick=\"loadPHP('code/interactive.php', 'sub0')\"><a href=\"#\" id=\"sub0\">Interactive applets</a></li><li onClick=\"loadPHP('code/statistics.php', 'sub1')\"><a href=\"#\" id=\"sub1\">Statistics</a></li><li onClick=\"loadPHP('code/wings.php', 'sub2')\"><a href=\"#\" id=\"sub2\">Wings</a></li><li onClick=\"loadPHP('code/3D.php', 'sub3')\"><a href=\"#\" id=\"sub3\">3D</a></li></ul>", 
                "<ul><li onClick=\"loadPHP('science/3D.php', 'sub0')\"><a href=\"#\" id=\"sub0\">3D</a></li><li onClick=\"loadPHP('science/ssd.php', 'sub1')\"><a href=\"#\" id=\"sub1\">Sexual Size Dimorphism</a></li><li onClick=\"loadPHP('science/shape.php', 'sub2')\"><a href=\"#\" id=\"sub2\">Wing shape</a></li><li onClick=\"loadPHP('science/phylogenetics.php', 'sub3')\"><a href=\"#\" id=\"sub3\"><i>Drosophila</i> phylogenetics</a></li><li onClick=\"loadPHP('science/communitygenetics.php', 'sub4')\"><a href=\"#\" id=\"sub4\">Community Genetics</a></li><li onClick=\"loadPHP('science/biodiversity.php', 'sub5')\"><a href=\"#\" id=\"sub5\">Biodiversity</a></li></ul>", 
                "<ul><li onClick=\"loadPHP('Kim.php', 'sub0')\"><a href=\"#\" id=\"sub0\">Who is Kim?</a></li><li onClick=\"loadPHP('animals/horses.php', 'sub1')\"><a href=\"#\" id=\"sub1\">Horses</a></li><li onClick=\"loadPHP('animals/birds.php', 'sub2')\"><a href=\"#\" id=\"sub2\">Birds</a></li><li onClick=\"loadPHP('private/outdoors.php', 'sub3')\"><a href=\"#\" id=\"sub3\">Outdoors</a></li><li onClick=\"loadPHP('contact.php', 'sub4')\"><a href=\"#\" id=\"sub4\">Contact</a></li></ul>"];
function changeNav(target) {
for (var i = 0; i<topNavNames.length; i++) {
    if (target == topNavNames[i]) {
        document.getElementById("subNav").innerHTML=subNavCode[i];
        document.getElementById(topNavNames[i]).style.color="#F7EDAA";
        document.getElementById(topNavNames[i]).style.borderBottom="thin solid #F7EDAA";
    }
    else {
        document.getElementById(topNavNames[i]).style.color="#EEE";
        document.getElementById(topNavNames[i]).style.borderBottom="thin solid #111";
    }
  }
}

function loadPHP(url, target) {
for (var i = 0; i<10; i++) {
    if(document.getElementById(target)!=null) {
        if (("sub"+i) == target) {
            document.getElementById(target).style.color="#F7EDAA";
            document.getElementById(target).style.borderBottom="thin solid #F7EDAA";
        }
        else {
            document.getElementById(target).style.color="#EEE";
            document.getElementById(target).style.borderBottom="thin solid #111";
        }
    }
}
}

如果我随后删除了：

else {
        document.getElementById(target).style.color="#EEE";
        document.getElementById(target).style.borderBottom="thin solid #111";
    }

来自loadPHP函数，它会更改样式，但在单击下一个链接时不会重置它。

我在FireFox，Internet Exploder和Chrome中观察到了这种行为。

补充：CSS代码：

body {
background-color: #111111;
color: #DDD;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
.wrapper {
overflow: auto;
}
.banner {
float: left;
position: relative;
width: 100px;
}
.main {
position: relative;
width: 80%;
left: 25px;
font-size: 14px;
font-weight: normal;
}
a {
text-decoration: none;
color: #EEE;
}
a:hover {
border-bottom: thin solid #F7EDAA !important;
color: #F7EDAA !important;
}
.topNav {
height: 45px;
position: relative;
left: 100px;
font-size: large;
border: thin solid #111;
}
#subNav {
height: 45px;
position: relative;
left: 100px;
top: 2px;
border: thin solid #111;
}
.topNav li, #subNav li {
float: left;
margin: 10px 15px;
}
.topNav ul,  #subNav ul {
list-style: none;
padding: 0px 0px;
margin: 0px 0px;
position: relative;
left: -100px;
}
.content {
position: relative;
left: 15px;
padding: 0px 0px;
margin: 0px 0px;
}
.content p {
padding: 5px 5px;
margin: 10px 15px;
left: -100px;
}

Answer 1

在我看来，你使用错误的技术来实现你的目标。您需要做的是在css样式表中编写样式，然后根据需要使用js向元素添加或删除类。（您也可以通过称为特异性的东西来做到这一点，远远超出您的问题的范围）

另外想一想，如果您的脚本中存在一些错误，或者您的页面中调用了第三方脚本，JS可能会中断并且不会处理您的样式更改。

因此，在初始标记中通过css将基本样式添加到元素中，这样您就可以确保元素始终具有基本样式，然后如果要使用等效的.addClass或removeClass jQuery方法。

通过这种方式，您将始终确保您的前端始终具有安全的样式，如果未加载js则不会中断，并且将正确实现关注点的分离。

问候。

Answer 2

我明白了。以下代码没有做正确的事情：

function loadPHP(url, target) {
for (var i = 0; i<subNavNames.length; i++) {
    if (target == subNavNames[i]){
        document.getElementById(target).className="selected";
    } else {
        document.getElementById(target).className="notSelected";
    }
}

虽然此代码确实产生了正确的结果：

function loadPHP(url, target) {
    for (var i = 0; i<subNavNames.length; i++) {
    if (target == subNavNames[i]) {
        document.getElementById(subNavNames[i]).className="selected";
    } else {
        document.getElementById(subNavNames[i]).className="notSelected";
    }
}

不同之处在于，在第一个示例中，在原始问题的示例中，我使用方法（目标）中传递的变量来查找元素。在第二个中，我使用了我添加到列表中的数组中的相应元素。我不确定为什么这种行为有所不同，但确实如此。

JavaScript引发的样式更改不是永久性的

2 个答案: