Question

我试图创建一个div，以便在点击它时它会增大并改变颜色以附加到另一个div。我到目前为止的代码是：

    <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>

和css：

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

我已经做到了这一点，它确实会在点击时更改div，但它不会使div在点击之后保持这种状态，这是我希望实现的目标。

我所拥有的是包含文本的橙色div以及按钮所在的上方（我使用div作为按钮）。单击时，我希望按钮的大小增加，并连接到另一个div，以显示该用户所在的页面。因此，我希望按下该按钮以加载页面，然后保持增加的大小，以便查看您所在的页面。

Answer 1

不要切换班级名称。始终设置为单击。

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

Answer 2

你可以这样做。如果您不想加载新页面。

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

如果您想要加载新页面，请执行以下操作：

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

并将以下内容添加到所有页面（可能在标题等中）

<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

尝试这样的事情......

<!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>

只需复制和粘贴，此示例使用jquery

点击后如何更改div并在之后保持更改？

3 个答案: