Question

抱歉我的英文..

在我的网站上，我根据所选颜色添加了一些颜色来改变我网站的颜色..它运作良好。

但问题是，当我刷新窗口时，它显示默认颜色，但我想在浏览器刷新时显示所选颜色..

提前致谢..！

我正在等待你的回应。

＆＃13;

    function openNav() {
        document.getElementById("mySidenav").style.width = "270px";
    }
    
    function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
    }
    
    $(document).ready(function () {
        $("#content-width").click(function () {
            $("#content").css({
                "width": "900px",
                "margin": "auto",
                "border": "1px solid #ddd",
                "background-color": "white"
                
            });
            $("#myMap").css({
                "width": "370px",
                "height": "300px",            
    
            });
            $(".navbar-expand-md .navbar-nav .nav-link").css({
                "padding-right": "2.6rem",
                "padding-left": "2.6rem"
            });
            $("body").css("background-color","#f2f2f2");
        });
        $("#original").click(function () {
            $(".index_top,.about-text,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link").css("background-color", "#2a3637");
            $("#nav").css("border-bottom", "5px solid #2a3637");
            $("#logo_img").attr("src", "images/logo.png");
            $(".for-bold-text").css("color", "#2a3637");
            $("#content").css({
                "width": "auto",
                "margin": "auto",
                "border": "none",
                "background-color": "white"
            });
            $("#myMap").css({
                "width": "500px",
                "height": "400px",
    
            });
            $(".navbar-expand-md .navbar-nav .nav-link").css({
                "padding-right": "4.25rem",
                "padding-left": "4.25rem"
            });
            $("body").css("background-color", "#fff");
        });
    
        $("#red").click(function () {
            $(".index_top,.about-text,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link").css("background-color", "#60100b");
            $("#nav").css("border-bottom", "5px solid #60100b");
            $("#logo_img").attr("src", "images/logo_red.png");
            $(".for-bold-text").css("color", "#60100b");
        });
    
        $("#blue").click(function () {
            $(".index_top,.about-text,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link").css("background-color", "#012A59");
            $("#nav").css("border-bottom", "5px solid #012A59");
            $("#logo_img").attr("src", "images/logo_blue.png");
            $(".for-bold-text").css("color", "#012A59");
        });
    
        $("#green").click(function () {
            $(".index_top,.about-text,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link").css("background-color", "#41564a");
            $("#nav").css("border-bottom", "5px solid #41564a");
            $("#logo_img").attr("src", "images/logo_green.png");
            $(".for-bold-text").css("color", "#41564a");
        });
    
        $("#yellow").click(function () {
            $(".index_top,.about-text,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link").css("background-color", "#586624");
            $("#nav").css("border-bottom", "5px solid #586624");
            $("#logo_img").attr("src", "images/logo_yellow.png");
            $(".for-bold-text").css("color", "#586624");
        });
    
        $("#gray").click(function () {
            $(".index_top,.about-text,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link").css("background-color", "#495c5e");
            $("#nav").css("border-bottom", "5px solid #495c5e");
            $("#logo_img").attr("src", "images/logo_gray.png");
            $(".for-bold-text").css("color", "#495c5e");
        });
    
        $("#voilet").click(function () {
            $(".index_top,.about-text,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link").css("background-color", "#513168");
            $("#nav").css("border-bottom", "5px solid #513168");
            $("#logo_img").attr("src", "images/logo_voilet.png");
            $(".for-bold-text").css("color", "#513168");
        });
    
        $("#black").click(function () {
            $(".index_top,.about-text,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link").css("background-color", "#16627f");
            $("#nav").css("border-bottom", "5px solid #16627f");
            $("#logo_img").attr("src", "images/logo_black.png");
            $(".for-bold-text").css("color", "#16627f");
        });
    
        $("#white").click(function () {
            $(".index_top,.about-text,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link").css("background-color", "#3d0d3f");
            $("#nav").css("border-bottom", "5px solid #3d0d3f");
            $("#logo_img").attr("src", "images/logo_white.png");
            $(".for-bold-text").css("color", "#3d0d3f");
        });
    
        $("#purple").click(function () {
            $(".index_top,.about-text,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link").css("background-color", "#CD0674");
            $("#nav").css("border-bottom", "5px solid #CD0674");
            $("#logo_img").attr("src", "images/logo_purple.png");
            $(".for-bold-text").css("color", "#CD0674");       
        });
        
    });

＆＃13;

    .sidenav {
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: rgb(230,240,251);
        overflow-x: hidden;
        transition: 0.5s;
        border:2px ridge #fff;
        border-radius:5px;
        box-shadow: 8px 8px 8px rgba(158,122,122,0.16);
        margin-top: 60px;
    }
    
        .sidenav a:hover {
            color: #fc0606;
        }
    
        .sidenav .closebtn {
            position: absolute;
            top: 0;
            right: 5px;
            font-size: 36px;
           
        }
    
    .icon {
        font-size: 30px;
        cursor: pointer;
        position: fixed;
        left: 0px;
        top: 60px;
        padding: 10px;
        background-color: rgba(0,0,0,0.6);
    }
    
        .icon img {
            height: 30px
        }
    
        .icon img {
            -webkit-animation: rotation 2s infinite linear;
        }
    
    @-webkit-keyframes rotation {
        from {
            -webkit-transform: rotate(0deg);
        }
    
        to {
            -webkit-transform: rotate(359deg);
        }
    }
    
    @media screen and (max-height: 450px) {
        .sidenav {
            padding-top: 15px;
        }
    
            .sidenav a {
                font-size: 18px;
            }
    }
    #original {
        color:forestgreen;
       text-align:center;
       font-size:20px;
       font-weight:bold;
    
    }
    #red, #blue, #green, #yellow, #gray, #voilet, #black, #white, #purple {
        height: 40px;
        width: 40px;
        float: left;
        margin: 10px;
    }
    #red {
        padding: 15px;
        background-color: #60100b;
    }
    #blue {
        padding: 15px;
        background-color: #012A59;
    }
    #green {
        padding: 15px;
        background-color: #41564a;
    }
    #yellow {
        padding: 15px;
        background-color: #586624;
    }
    #gray {
        padding: 15px;
        background-color: #495c5e;
    }
    #voilet {
        padding: 15px;
        background-color: #513168;
    }
    #black {
        padding: 15px;
        background-color: #16627f;
    }
    #white {
        padding: 15px;
        background-color: #3d0d3f;
    }
    #purple {
        padding: 15px;
        background-color: #CD0674;
    }
    
    #content-width 
    {
        text-align:center;
        font-weight:bold;
        font-size:20px;
        color:#000;
    }
    .index_top {
        background-color: #2a3637;
        height: 35px;
    }
        .index_top p 
        {
            color:#fff;
            padding-top:5px;
        }

＆＃13;

  
<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    </head>
    <body>
      <div id="content">
            <div class="container-fluid">
                <div class="index_top">
                    <div class="container">
                        <div class="col-md-12 col-sm-12 col-xl-12 col-12 col-lg-12">
                            <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                                <p>
                                    <i class="fa fa-phone"></i> &nbsp; &nbsp;123456789
                                </p>
                            </div>
                           
                        </div>
                    </div>
                </div>
    
                <!-- LOGO  IMAGE -->
                
    
    
              
                <!-- SIDE COLOR MENU -->
    
                <div id="mySidenav" class="sidenav">
                    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                    <div>
                        <div id="red"></div>
                        <div id="blue"></div>
                        <div id="green"></div>
                        <div id="yellow"></div>
                        <div id="gray"></div>
                        <div id="voilet"></div>
                        <div id="black"></div>
                        <div id="white"></div>
                        <div id="purple"></div>
                        <div class="clearfix"></div>
                        <p id="original">Show Original</p>
                        <p id="content-width">Low width</p>
                    </div>
    
    
                </div>
                <span class="icon" onclick="openNav()">
                    <img src="images/tool.png" class="img-fluid" alt="open"/>
                </span>
    
    
              
    
            </div>
        </div>
    </body>
    </html>

＆＃13;

Answer 1

您可以使用本地存储来存储值，并在页面刷新时进行检索。

$("#red").click(function () {
       localStorage.setItem("color","red"); 
    });


  $(document).ready(function () {
    var color= localStorage.getItem("color");   //get from local storage.
        $("#content-width").click(function () {
            $("#content").css({
                "color": color,    // here you use value from local storage. 
                "width": "900px",
                "margin": "auto",
                "border": "1px solid #ddd",
                "background-color": "white"

            });

希望这有帮助。

https://www.w3schools.com/jsref/prop_win_localstorage.asp

提供了更多信息

Answer 2

在框中添加一个类，以便您可以显着减少代码。我在下面添加了工作代码，请参考。
的 HTML

<div> <div class="box" id="red"></div> <div class="box" id="blue"></div> <div class="box" id="green"></div> <div class="box" id="yellow"></div> <div class="box" id="gray"></div> <div class="box" id="voilet"></div> <div class="box" id="black"></div> <div class="box" id="white"></div> <div class="box" id="purple"></div> <div class="clearfix"></div> <p id="original">Show Original</p> <p id="content-width">Low width</p> </div>

<强>脚本

function openNav() { document.getElementById("mySidenav").style.width = "270px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; } $(document).ready(function () { $(".index_top,.about-text,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link").css("background-color", localStorage.getItem("default")); $("#content-width").click(function () { $("#content").css({ "width": "900px", "margin": "auto", "border": "1px solid #ddd", "background-color": "white" }); $("#myMap").css({ "width": "370px", "height": "300px", }); $(".navbar-expand-md .navbar-nav .nav-link").css({ "padding-right": "2.6rem", "padding-left": "2.6rem" }); $("body").css("background-color",localStorage.getItem("default")); }); $("#original").click(function () { $(".index_top,.about-text,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link").css("background-color", "#2a3637"); $("#nav").css("border-bottom", "5px solid #2a3637"); $("#logo_img").attr("src", "images/logo.png"); $(".for-bold-text").css("color", "#2a3637"); $("#content").css({ "width": "auto", "margin": "auto", "border": "none", "background-color": "white" }); $("#myMap").css({ "width": "500px", "height": "400px", }); $(".navbar-expand-md .navbar-nav .nav-link").css({ "padding-right": "4.25rem", "padding-left": "4.25rem" }); $("body").css("background-color", localStorage.getItem("default")); }); $(".box").click(function () { var color = $(this).css("background-color"); var image = "images/logo_"+$(this).attr("id"); changeColor(image, color) }); function changeColor(image, color){ $(".index_top,.about-text,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link,.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link").css("background-color", color); $("#nav").css("border-bottom-color", color); $("#logo_img").attr("src", image); $(".for-bold-text").css("color", color); localStorage.setItem("default", color); } });

Answer 3

如果你清除＃color.click函数，我认为你的问题会解决。

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}

$(document).ready(function () {
    $("#content-width").click(function () {
        $("#content").css({
            "width": "900px",
            "margin": "auto",
            "border": "1px solid #ddd",
            "background-color": "white"

如何在刷新浏览器时防止更改所选颜色

3 个答案: