Question

在我的母版页面中有四个按钮。它有鼠标悬停css属性。每个按钮响应页面都在同一主页面上定义。现在我想在用户在相应页面上时更改按钮样式。它是如何成为可能的？我的母版页包含以下代码

<style type="text/css">
.side_btn_css {
 width: 200px;
 height: 85px;
 font-size: 20px;
 color: #fff;
 line-height:20px;
 text-align: center;
 border-radius: 50%;
 background-color:#b30000;
 border-style: solid;
 border-color: #ffffff #b30000;
 border-width: 15px;
 }
.side_btn_css:hover
{
width: 200px;
height: 85px;
font-size: 20px;
color: #fff;
line-height:20px;
text-align: center;
border-radius: 50%;
background-color:#0a4241;
border-style: solid;
border-color: #ffffff #008080;
border-width: 15px;
}

.side_btn_css_focus
{
width: 200px;
height: 85px;
font-size: 20px;
color: #fff;
line-height:20px;
text-align: center;
border-radius: 50%;
background-color:#3333ff;
border-style: solid;
border-color: #000000 ##3333ff;
border-width: 15px;
 }
 </style>
<div id="left_buttons" style="size: auto;">
<asp:Button ID="bt_home1"   runat="server"   CssClass="side_btn_css"  text="Home1" Font-Size="Larger" onclick="bt_home1_Click"/> <p />
<asp:Button ID="bt_home2"  runat="server"   text="Home2" CssClass="side_btn_css"  Font-Size="Larger" onclick="bt_home2_Click" />
<p />
<asp:Button ID="bt_home3"  runat="server"  CssClass="side_btn_css"  text="Home3" Font-Size="Larger"  onclick="bt_home3_Click"/>  <p />
<asp:Button ID="bt_home4"  runat="server"   CssClass="side_btn_css"  text="Home4" Font-Size="Larger" onclick="bt_home4_Click"/></div>

protected void bt_home1_Click(object sender, EventArgs e)
{
 Response.Redirect("home1.aspx");  
}
protected void bt_home2_Click(object sender, EventArgs e)
{
 Response.Redirect("home2.aspx");  
}

Answer 1

您需要在页面中添加Jquery，这样可以轻松编写代码。（您也可以通过JavaScript完成，但Jquery是一种简单的方法）

您必须根据请求的页面向按钮添加类。为此，您必须从请求的URL获取该页面的名称，并形成JQuery Selector，如下所示。

$( document ).ready(function() {
    var page = url.split('/'); 
    page = page[page.length-1].replace(".aspx","");
    $("#bt_"+page).addClass("side_btn_css_focus");
});

您可以为侧边菜单和顶部菜单添加其他文字的前缀。

导航到相应页面时如何更改按钮的样式？

1 个答案: