Question

我是JavaScript的新手，我需要一些帮助。我正在制作一个橙色的网站，在网站上我有两个按钮（a）。我有两个可以通过点击按钮显示的div。我还有三个红色，蓝色和橙色的div，点击它们页面将背景，标题，按钮和div更改为蓝色，红色或橙色。当我点击按钮（a）时，他的颜色变为白色。当我按下另一个按钮时，他变成白色，第一个变成橙色（这很好）。但如果我将页面翻到蓝色，请单击第一个按钮，然后单击在第二个，第一个变回橙色而不是蓝色。我怎么能做对吗？

我试过在函数中创建一个if语句和一个变量。当我在函数中使它变为蓝色时，我写了var shades =“blue”（红色和橙色相同）。然后在一个按钮功能，我已经将颜色背景写入白色然后将ather按钮转到if语句（如果shades =“blue”则将背景变为蓝色）然后另一个声明（如果shades =“red”将背景变为红色）和橙色相同。但它不起作用，因为变量值仅在函数中更改，然后停止。如何通过单击按钮来更改变量值？

谢谢。

为例：

<header>
    <ul id="headerul">
        <li><a onclick="page1()" href="#" id="a" >page1</a></li>
        <li><a onclick="page2()" href="#" id="a1">page2</a></li>

        <div id="blue" onclick="colorB()"></div>
        <div id="red" onclick="colorR()"></div>
        <div id="orange" onclick="colorO()></div>
    </ul>
</header>

<script>
        function colorB(){
        document.getElementById('body').style.cssText =
        'background-color:a7a7ff;'
        document.getElementById('headerul').style.cssText =
        'background-color:7777ff;'
        document.getElementById('a').style.cssText =
        'background-color:#a7a7ff;'
        document.getElementById('a1').style.cssText =
        'background-color:#a7a7ff;'
        var body = 'blue'
    }
    function colorR(){
        document.getElementById('body').style.cssText =
        'background-color:ff5252;'
        document.getElementById('headerul').style.cssText =
        'background-color:ff2222;'
        document.getElementById('a').style.cssText =
        'background-color:#ff5252;'
        document.getElementById('a1').style.cssText =
        'background-color:#ff5252;'
        var body = 'red'
    }
    function colorO(){
        document.getElementById('body').style.cssText =
        'background-color:#ffc5a0;'
        document.getElementById('headerul').style.cssText =
        'background-color:#ff8027;'
        document.getElementById('a').style.cssText =
        'background-color:#ffc5a0;'
        document.getElementById('a1').style.cssText =
        'background-color:#ffc5a0;'
        var body = 'orange'
    }
    function page1(){
        document.getElementById('a1').style.cssText =
        'background-color:white;'
              if (body=="blue") {
              document.getElementById('a').style.cssText =
             'background-color:#a7a7ff;'
        };
              if (body=="orange") {
              document.getElementById('a').style.cssText =
              'background-color:#ffc5a0;'
        };
    }
    function page2(){
        document.getElementById('a').style.cssText =
        'background-color:white;'
              if (body=="blue") {
              document.getElementById('a1').style.cssText =
             'background-color:#a7a7ff;'
        };
              if (body=="orange") {
              document.getElementById('a1').style.cssText =
              'background-color:#ffc5a0;'
        };
    }
</script>

Answer 1

如果没有看到您的代码，这几乎是不可能的，但我猜这可能会对您有所帮助：

https://jsfiddle.net/1xv6qjpx/

I would add this as a comment but I don't yet have the ability to do so.

更改变量值on {

1 个答案: