Question

我使用内联onclick来切换页面上用作标签的两个图像。交换确实很好，但当页面重新加载时，图像将恢复为主图像。我希望图像保持为“选定”图像，直到单击另一个选项卡。

 <img id="image3" src="images/charts1.png" style="display:inline;" onclick="document.getElementById('image3').style.display='none'; document.getElementById('image4').style.display='inline';" "/>

    <img id="image4" src="images/charts2.png" style="display:none;" onclick="document.getElementById('image4').style.display='none'; document.getElementById('image3').style.display='inline';"/>

我的剧本

<script>
    if (document.images) { 
        img1on = new Image();
        img1on.src = "images/over1.jpg"; 
        img1off = new Image(); 
        img1off.src = "images/notover.jpg"; 
        img2on = new Image();
        img2on.src = "images/over2.jpg"; 
        img2off = new Image(); 
        img2off.src = "images/notover.jpg"; 
    }
    function imgOn(imgName) {
        if (document.images) {
            document[imgName].src = eval(imgName + "on.src");}
    }
    function imgOff(imgName) {
        if (document.images) {
            document[imgName].src = eval(imgName + "off.src");}
        }
</script>

Answer 1

根据它的声音，您希望Javascript中的信息即使在页面刷新后也能保持状态，因此您需要使用cookie或localstorage来存储活动选项卡或图像ID或其他一些有意义的信息以便与之关联。它

这是一个使用localStorage的解决方案，如果它可用并回退到使用cookie。

function imgOn(imgName) {
        if (document.images) {
            document[imgName].src = eval(imgName + "on.src");}
storeUpdate(imgName, imgName + "on.src");
    }
    function imgOff(imgName) {
        if (document.images) {
            document[imgName].src = eval(imgName + "off.src");}
storeUpdate(imgName, imgName + "on.src");
        }

function storeUpdate(key, value){
if(typeof(Storage)!=="undefined")
  {
  // Yes! localStorage and sessionStorage support
localStorage.setItem(key, value);
  }
else
  {
  // Sorry! No web storage support..
var exdays = 10; // Number of days before cookie will expire
setCookie(key, value, exdays);
  }
}

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

然后在页面加载时，您可以检查是否存在任何这些cookie：

function getImages(imgName){
if(typeof(Storage)!=="undefined")
  {
  // Yes! localStorage and sessionStorage support
return localStorage.getItem(imgName);
  }
else
  {
  // Sorry! No web storage support..
return getCookie(imgName);
  }
}
function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1)
  {
  c_start = c_value.indexOf(c_name + "=");
  }
if (c_start == -1)
  {
  c_value = null;
  }
else
  {
  c_start = c_value.indexOf("=", c_start) + 1;
  var c_end = c_value.indexOf(";", c_start);
  if (c_end == -1)
  {
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}

图像交换问题

1 个答案: