Javascript 导航到相应页面时如何更改按钮的样式?
在我的主页上有四个按钮。它有鼠标悬停css属性。每个按钮响应页面都定义在同一母版页上。现在我想在用户位于相应页面上时更改按钮样式。这怎么可能呢?我的主页包含以下代码Javascript 导航到相应页面时如何更改按钮的样式?,javascript,html,css,asp.net,Javascript,Html,Css,Asp.net,在我的主页上有四个按钮。它有鼠标悬停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%
<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");
}
.side_btn_css{
宽度:200px;
高度:85px;
字体大小:20px;
颜色:#fff;
线高:20px;
文本对齐:居中;
边界半径:50%;
背景色:#b30000;
边框样式:实心;
边框颜色:#ffffff#b30000;
边框宽度:15px;
}
.side_btn_css:悬停
{
宽度:200px;
高度:85px;
字体大小:20px;
颜色:#fff;
线高:20px;
文本对齐:居中;
边界半径:50%;
背景色:#0a4241;
边框样式:实心;
边框颜色:#ffffff#008080;
边框宽度:15px;
}
.side_btn_css_焦点
{
宽度:200px;
高度:85px;
字体大小:20px;
颜色:#fff;
线高:20px;
文本对齐:居中;
边界半径:50%;
背景色:#3333ff;
边框样式:实心;
边框颜色:#000000##3333ff;
边框宽度:15px;
}
受保护的无效bt_home1_单击(对象发送方,事件参数e)
{
重定向(“home1.aspx”);
}
受保护的无效bt_home2_单击(对象发送方,事件参数e)
{
重定向(“home2.aspx”);
}
您需要在页面中添加Jquery,这将使您的编码变得简单。(您也可以通过JavaScript实现,但Jquery是一种简单的方式)
您必须根据请求的页面向按钮添加类。为此,您必须从请求的url和表单JQuery选择器中获取该页面的名称,如下所示
$( document ).ready(function() {
var page = url.split('/');
page = page[page.length-1].replace(".aspx","");
$("#bt_"+page).addClass("side_btn_css_focus");
});
您可以为侧菜单和顶部菜单添加一些其他文本的前缀 每个页面都有不同的控制器吗?@Raphaelpareria yesI对asp.net不太了解。但是您可以通过
id
选择按钮,在服务器端设置CSS类。因此,您可以准确地操纵您想要的按钮!我会帮你做些调查也许这对你有帮助。。。。bt_home1.Attributes.Add(“class”,“side_btn_css_focus”);