Question

我有一个html页面（http://www.autoelettric.com/info/SafeConversionToLed.html），当我点击按钮时，顶部的状态栏会发生变化。该网站将设计为通过按钮轻松导航，但如果用户使用滚动，状态栏不会更新。所以我想知道是否可以更新网址更新状态栏的事件（httt.url.com＃step1，httt.url.com＃step2，httt.url.com＃step3）。

例如，我的代码现在：
脚本：

<script type = "text/javascript">
    function status0()
    {
        document.getElementById("imgStausBar").src ="status0.png";
    }
    function status1()
    {
        document.getElementById("imgStausBar").src ="status1.png";
    } 
    function status2()
    {
        document.getElementById("imgStausBar").src ="status2.png";
    } 
    function status3()
    {
        document.getElementById("imgStausBar").src ="status3.png";
    } 
</script>

HTML

<a href="#FlasherUnit" onclick="status1()"><div class="btn-5" width="50px">↓ START</div></a>
<a href="#ExactPower" onclick="status3()"><div class="btn-5" width="50px">→ YES</div></a>
<a href="#FlasherUnit" onclick="status1()"><div class="btn-5-previous" width="50px">↩ PREVIOUS</div></a>
<a href="#SafeConversion" onclick="status0()"><div class="btn-5-top" width="10px">↑</div></a>

我会做什么：

 if current url is #SafeConversion do status0()
 if current url is #FlasherUnit do status1()
 if current url is #ExactPower do status2()
 etc...

编辑：

我添加了这个，但它没有用。

if ("onhashchange" in window) { // event supported?
    window.onhashchange = function () {
        hashChanged(window.location.hash);
    }
}
else {
    var locationHash = window.location.hash;

    window.setInterval(function () {
        if(locationHash == "#SafeConversion") {
            status0();
        } else if(locationHash == "#FlasherUnit") {
           status1();
        } else if(locationHash == "#ExactPower") {
           status2();
        } else if(locationHash == "#ExactPower") {
           status2();
        } else if(locationHash == "#YourSolution") {
           status3();
        } else if(locationHash == "#YourSolution2") {     
           status3();
        } else if(locationHash == "#YourSolution2/1") {     
           status3();
        } else if(locationHash == "#YourSolution3") {     
          status3();
        } else if(locationHash == "#YourSolution3/1") {     
          status3();
        } else if(locationHash == "#YourSolution4") {     
          status3();
        } else if(locationHash == "#Contact") {     
          status0();
        }
    }, 100);
}

Answer 1

这样的事情应该有效：

<script type="text/javascript">
function hashChanged(locationHash) {
    if(locationHash == "#SafeConversion") {
        status0();
    } else if(locationHash == "#FlasherUnit") {
        status1();
    } else if(locationHash == "#ExactPower") {
        status2();
    } else if(locationHash == "#ExactPower") {
        status2();
    } else if(locationHash == "#YourSolution") {
        status3();
    } else if(locationHash == "#YourSolution2") {     
        status3();
    } else if(locationHash == "#YourSolution2/1") {     
        status3();
    } else if(locationHash == "#YourSolution3") {     
        status3();
    } else if(locationHash == "#YourSolution3/1") {     
        status3();
    } else if(locationHash == "#YourSolution4") {     
        status3();
    } else if(locationHash == "#Contact") {     
        status0();
    } 
}

if ("onhashchange" in window) { // event supported?
    window.onhashchange = function () {
        hashChanged(window.location.hash);
    }
}
else { // event not supported:
    var storedHash = window.location.hash;
    window.setInterval(function () {
        if (window.location.hash != storedHash) {
            storedHash = window.location.hash;
            hashChanged(storedHash);
        }
    }, 100);
}

</script>

Answer 2

如果您的意思是网址，当您说状态栏时，我尝试了它并且当我向上或向下滚动时状态栏会更新。

Answer 3

使用＆＃34; window.location.hash＆＃34;

var locationHash = window.location.hash;
if(locationHash == "#SafeConversion") {
    status0();
} else if(locationHash == "#FlasherUnit") {
    status1()
}

依旧......

网址更改页面上的Javascript功能

3 个答案: