Question

我正在制作包含按钮的asp.net/c#个标签。我想在点击后更改按钮的颜色，在我点击另一个按钮后我想要更改其他按钮颜色，第一个将具有旧颜色，我已经使用了一个类激活，但它将改变它1秒

这是我的asp.net代码：

 <div>
     <input type="button" id="t1" class="button" onclick="setColor('tab1', 0)" value="b 1">
     <input type="button" id="t2" class="button" onclick="setColor('tab2', 1)" value="b 2" >
     <input type="button" id="t3" class="button" onclick="setColor('tab3', 2)" value="b 3">
</div>

这是JavaScript。当我在做window.location.href时，它会再次显示默认颜色。

<script type="text/javascript">
function setColor(btn, par) {
    if (par ==  0) {
        window.location.href = "Default.aspx";
        document.getElementById("tab1").style.backgroundColor = "#ff0000";
        document.getElementById("tab2").style.backgroundColor = "#00bcd4";
        document.getElementById("tab3").style.backgroundColor = "#00bcd4";  
    } else if (par == 1) {
        window.location.href = "Default2.aspx";
        document.getElementById("tab1").style.backgroundColor = "#00bcd4";
        document.getElementById("tab2").style.backgroundColor = "#ff0000";
        document.getElementById("tab3").style.backgroundColor = "#00bcd4";
    } else if (par == 2) {
        window.location.href = "Default3.aspx";
        document.getElementById("tab1").style.backgroundColor = "#00bcd4";
        document.getElementById("tab2").style.backgroundColor = "#00bcd4";
        document.getElementById("tab3").style.backgroundColor = "#ff0000";
    }
}
</script>

Answer 1

这可以通过简单的CSS规则完成，而且根本不需要JavaScript。

我在活动时使用了Cascading样式表类，但它会改变它持续1秒。

您的问题是您尝试了:active伪类（对于按钮，仅在单击“主动”按钮时应用）而不是:focus伪类。 / p>

.button { background-color:aqua; }  /* default color for all buttons */
.button:focus { background-color: rgba(255, 75, 75, .5); }

<div class="btn-group">
  <input type = "button" id="tab1" class="button" value ="button 1">
  <input type = "button" id="tab2" class="button" value ="button 2">
  <input type = "button" id="tab3" class="button" value ="button 3">
</div>

要保持按钮的“焦点”颜色，即使它将焦点丢失到另一个非按钮元素，您也会为每个按钮设置一个click事件处理程序，将相同的类添加到单击的按钮并将其从所有其他人中删除：

// Get all the relevant buttons into an array
var buttons = Array.prototype.slice.call(document.querySelectorAll(".button"));

// Loop through the buttons
buttons.forEach(function(btn){

  // Set up a click event handler for the button
  btn.addEventListener("click", function(){
    // Loop though all the buttons and reset the colors back to default
    buttons.forEach(function(btn){ btn.classList.remove("focus"); });
    this.classList.add("focus"); // Add the class to the one button that got clicked
  });
  
});

.button { background-color:aqua; }  /* default color for all buttons */
.focus { background-color: rgba(255, 75, 75, .5); }

<div class="btn-group">
  <input type = "button" id="tab1" class="button" value ="button 1">
  <input type = "button" id="tab2" class="button" value ="button 2">
  <input type = "button" id="tab3" class="button" value ="button 3">
</div>

<p>Other things to click on:
  <input type = "text" value ="button 1">
  <input type = "button" value ="button 2">
  <input type = "radio" value ="button 3">
</p>

Answer 2

window.location.href = "pageName.aspx"

让你去另一页。在这种情况下，另一页加载。这会让你失去你设定的颜色。

您可以从后面的代码设置颜色，而不是丢失它。或者使用window.location.href检查您所在的页面。并根据此结果设置颜色上载。

修改由于您在母版页上有它们，您可以执行以下操作。

protected void Page_Load(object sender, EventArgs e) { SetCurrentPage(); } private void SetCurrentPage() { var pageName = Request.Url.AbsolutePath; switch (pageName) { case "/Default.aspx": t1.Attributes["class"] = "button tabColor"; break; case "/Default2.aspx": t2.Attributes["class"] = "button tabColor"; break; case "/Default3.aspx": t3.Attributes["class"] = "button tabColor"; break; } }

将runat="server"添加到控件中，以便您可以在后面的代码中访问它们。

<div> <input type="button" id="t1" runat="server" class="button" value="b 1"> <input type="button" id="t2" runat="server" class="button" value="b 2"> <input type="button" id="t3" runat="server" class="button" value="b 3"> </div>

为tabcolor创建一个css类

.tabColor { background-color: #ff0000; }

并回答您的问题如何从子页面访问主控件：

var someControl = this.Master.FindControl("controlName");

我想在点击后更改按钮的背景颜色，并在我点击另一个按钮后再次更改为原始颜色

2 个答案: