简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Fragen und Antworten  >  Hauptteil

javascript – Problem beim Skinning von JS-Webseiten

<link href="green.css" rel="stylesheet" type="text/css" />

window.onload = function ()
{
    var oLink = document.getElementsByTagName("link")[0];
    var oSkin = document.getElementById("skin").getElementsByTagName("li");
    
    for(var i = 0; i< oSkin.length; i++)
    {        
        oSkin[i].onclick = function ()
        {
            for(var p in oSkin) oSkin[p].className = "";
            this.className = "current";
            oLink['href'] = this.id + ".css";                
        }    
    }
    
};
<body>
<p id="outer">
    <ul id="skin">
        <li id="red" title="红色">红</li><li id="green" class="current" title="绿色">绿</li><li id="black" title="黑色">黑</li>
    </ul>
    <ul id="nav">
        <li><a href="javascript:;">新闻</a></li>
        <li><a href="javascript:;">娱乐</a></li>
        <li><a href="javascript:;">体育</a></li>
        <li><a href="javascript:;">电影</a></li>
        <li><a href="javascript:;">音乐</a></li>
        <li class="last"><a href="javascript:;">旅游</a></li>
    </ul>
</p>
</body>

Was bedeutet this.className = „current“? Ist es die Schaltfläche, die dem grünen Status der aktuellen Seite entspricht?

世界只因有你世界只因有你2662 Tage vor854

Antworte allen(4)Ich werde antworten

  • 天蓬老师

    天蓬老师2017-07-05 10:52:04

    this.className = "current";
    将当前被点击的那个<li> 的class 设为 current，达到动态更改标签样式的目的

    Antwort
    0
  • 巴扎黑

    巴扎黑2017-07-05 10:52:04

    .css 应该是一个样式文件，通过id来载入指定的皮肤样式。

    link 是一个 html element，用来载入资源的。

    Antwort
    0
  • PHP中文网

    PHP中文网2017-07-05 10:52:04

    一般来说，换肤的话会涉及到很多CSS。我一般都会把外联的CSS换掉来做这个功能。
    假设我现在有一个HTML文件和两个HTML皮肤（就是俩CSS文件，一红一黄）。
    简单的代码如下
    <!DOCTYPE html>
    <html>
    <head>

    <meta charset="utf-8">
<title>test</title>
<link id="css" rel="stylesheet" href="red.css">

    </head>
    <body>

    <button id="red">red</button>
<button id="yellow">yellow</button>
<script>
    var css = document.getElementById("css");
    var red = document.getElementById("red");
    var yellow = document.getElementById("yellow");
    red.onclick = function () {
        css.href = "red.css";
    };
    yellow.onclick = function () {
        css.href = "yellow.css";
    };
</script>

    </body>
    </html>
    大概就是这个感觉

    Antwort
    0
  • 滿天的星座

    滿天的星座2017-07-05 10:52:04

    你这个代码应该没完，他这个代码的意思估计是修改皮肤，动态加载css样式。

    Antwort
    0
  • StornierenAntwort