Dobra, zmieniam wygląd linków za pomocą JavaScript. Kiedy zmieniam zawartość kina twardego, przykleja się, że zmieniony kolor i podkreśla pozostaje, gdy kursor nie unosi się nad nim. Jednak gdy zawartość div została zmieniona za pomocą JavaScript, zmiany stylu nie przyklejają się.

Oto kod 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>

Oto kod 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";
        }
    }
}
}

Jeśli następnie usunąć:

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

Z funkcji LOADFP zmienia styl, ale nie zresetuje go, gdy następny link jest klikany.

Zauważyłem to zachowanie w Firefoksie, Internet Exploder i Chrome.

Dodano: kod 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;
}
2
KimvdLinde 27 listopad 2013, 00:17

2 odpowiedzi

Najlepsza odpowiedź

Rozgryzłem to. Poniższy kod nie robi właściwej rzeczy:

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

Podczas gdy ten kod wytwarza odpowiedni wynik:

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

Różnica polega na tym, że w pierwszym przykładzie, aw przykładzie pierwotnego pytania używam zmiennej przekazanej w metodzie (celu), aby znaleźć element. W drugim, używam odpowiedniego elementu z tablicy, którą dodałem do listy. Nie jestem pewien, dlaczego zachowuje się to inaczej, ale tak.

0
KimvdLinde 27 listopad 2013, 18:42

Moim zdaniem korzystasz z niewłaściwej technologii, aby osiągnąć swój cel. To, co musisz zrobić, to napisać style w arkuszu stylów CSS, a następnie dodaj lub usuń klasę do elementów za pomocą JS, jeśli chcesz. (Możesz także to zrobić poprzez coś zwanego specyficznością, trochę daleko przed zakresem twojego pytania)

Pomyśl też, że jeśli w skrypcie jest jakiś błąd w skrypcie, czy skrypt stron trzecich wezwał na twojej stronie, JS może się złamać i nie przetworzenie zmian stylizacji.

Dodaj więc podstawową styling do swoich elementów za pomocą CSS w początkowej znacznika, dzięki czemu będziesz pewien, że twoje elementy będą miały zawsze podstawową stylistykę, a następnie, jeśli chcesz użyć równoważnych metodom .DClass lub Removeclaslass Jquery.

W ten sposób zawsze będziesz pewien, że twoja frontend będzie zawsze bezpieczna stylizacja, nie pęka, czy JS nie zostanie załadowany, a rozdzielenie obaw zostanie odpowiednio wdrażane.

Pozdrowienia.

1
Guillermo 27 listopad 2013, 16:18