单击后如何进行div更改并在以后保持更改？

Question

I'm trying to make a div so that when it is clicked it grows in size and changes colour to attach to another div. 我正在尝试制作一个div，以便在单击它时它会增大尺寸并更改颜色以附加到另一个div。 The code I have so far is: 到目前为止，我的代码是：

    <div id="wrapper">
            <a href="homepage.html" onmousedown="javascript:(btn=document.getElementById('btnhome')).className = (btn.className  == 'clicked') ? '' : 'clicked';"><div id="btnhome">Home</div></a>
    </div>

and css: 和CSS：

    #btnhome.clicked{
       background-color:#ff9014;
       height:50px;
    }

I have got this far, which does make the div change when it is clicked, but it does not make the div stay that way after being clicked which is what I am hoping to achieve. 我已经了解到了这一点，它确实使div在单击时发生了变化，但是并没有使div在单击后保持这种状态，这是我希望实现的目标。

What I have is a orange div containing text and above that is where the buttons are (I am using divs as buttons). 我所拥有的是一个包含文本的橙色div，上方是按钮所在的位置（我将div作为按钮使用）。 When clicked I want the button to grow in size and connect to the other div to show that is the page that the user is on. 单击后，我希望按钮增大并连接到另一个div以显示用户所在的页面。 So I want the button when clicked to load the page and then stay the increased size as a way of seeing which page you are on. 因此，我希望单击按钮时可以加载页面，然后保持增加的大小，以便查看您所在的页面。

Answer 1

Don't toggle the class name. 不要切换班级名称。 Always set to clicked. 始终设置为单击。

onmousedown="javascript:(btn=document.getElementById('btnhome')).className = 'clicked';"

Answer 2

You can do it like. 你可以这样做。 If you don't want the new page to load. 如果您不希望加载新页面。

 <a href="homepage.html" onmousedown="javascript:(btn=document.getElementById('btnhome')).className = 'clicked'; return false;"><div id="btnhome">Home</div></a>

If you want the new page to load then do it like: 如果要加载新页面，请执行以下操作：

 <a href="homepage.html" onmousedown="javascript:(btn=document.getElementById('btnhome')).className = 'clicked'; this.href= this.href + '?btn=clicked'"><div id="btnhome">Home</div></a>

and add the following to all the pages (probably in header etc) 并将以下内容添加到所有页面（可能在标题等中）

<script type="text/javascript"> 
   var QueryString = function () {
   // This function is anonymous, is executed immediately and 
   // the return value is assigned to QueryString!
   var query_string = {};
   var query = window.location.search.substring(1);
   var vars = query.split("&");
   for (var i=0;i<vars.length;i++) {
       var pair = vars[i].split("=");
       // If first entry with this name
       if (typeof query_string[pair[0]] === "undefined") {
          query_string[pair[0]] = pair[1];
         // If second entry with this name
      } else if (typeof query_string[pair[0]] === "string") {
         var arr = [ query_string[pair[0]], pair[1] ];
         query_string[pair[0]] = arr;
         // If third or later entry with this name
      } else {
         query_string[pair[0]].push(pair[1]);
      }
   } 
    return query_string;
  } ();

if(QueryString.btn === 'clicked'){
    document.getElementById('btnhome')).className = 'clicked';
}
</script>

Answer 3

try something like this... 尝试这样的事情...

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#dd").click(function(){
$("#dd").css("background-color","pink");
});
});
</script>
</head>
<body>

<div id="dd">Click the mouse pointer over this paragraph.</div>

</body>
</html>

just copy and paste, this example uses jquery 只是复制和粘贴，此示例使用jquery

单击后如何进行div更改并在以后保持更改？

问题描述

3 个解决方案

解决方案1
0 2014-06-12 14:25:51

解决方案2
0 2014-06-12 14:50:22

解决方案3
0 2014-06-12 14:53:01

单击后如何进行div更改并在以后保持更改？

问题描述

3 个解决方案

解决方案1 0 2014-06-12 14:25:51

解决方案2 0 2014-06-12 14:50:22

解决方案3 0 2014-06-12 14:53:01

解决方案1
0 2014-06-12 14:25:51

解决方案2
0 2014-06-12 14:50:22

解决方案3
0 2014-06-12 14:53:01