我是网页新手，我正在创建一个简单的网站，其中有一些页面选择器按钮。
该网站使用母版页和 asp。
我希望选中的按钮在单击时改变颜色以标识当前选中的页面。 该按钮基本上应该从粉红色变为灰色，并保持这种状态，直到单击另一个按钮。
我已经尝试了所有常用的选项，但似乎没有任何效果，我知道这是我的无知!
HTML 片段
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MailTest.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href='http://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet' type='text/css'/>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="Form1" runat="server">
<div id="wrap">
<div id="header">
<img src="images/logo.gif" alt="Whamm Logo" />
</div>
<div id="wrap2">
<div id="menu">
<ul>
<li><a href="Default.aspx" onclick="this.classname='cClick'" class="button cColour">HOME</a></li>
<li><a href="About.aspx" onclick="this.classname='cClick'" class="button cColour">ABOUT US</a></li>
<li><a href="Services.aspx" onclick="this.classname='cClick'" class="button cColour">OUR SERVICES</a></li>
<li><a href="Quotes.aspx" onclick="this.classname='cClick'" class="button cColour">REQUEST A QUOTE</a></li>
<li><a href="Contact.aspx" onclick="this.classname='cClick'" class="button cColour">CONTACT US</a></li>
<li><a href="http://www.mailbigfile.com/whamm" target="_blank" class="button cColour">UPLOAD A FILE</a></li>
</ul>
</div>
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
<!-- #BeginEditable "content" -->
<!-- #EndEditable -->
</div>
</div>
<div id="footer">
<a href="mailto: mail@wham.co.uk" target="_blank">mail@whamm.co.uk 01509 646553</a>
</div>
</div>
</form>
</body>
</html>
CSS 片段
html, body {
margin: 0,0,0,0;
font-family: 'Ropa Sans', sans-serif;
}
#wrap {
margin: 0 auto;
margin-top:10px;
width: 800px;
}
#header
{
width:800px;
height:145px;
}
img
{
max-height:100%;
-ms-interpolation-mode: bicubic;
float:right;
}
#wrap2
{
clear:both;
margin:0;
width:780px;
}
#menu
{
margin: 0;
float:left;
width:200px;
}
#main {
margin: 0;
float:right;
width:580px;
}
ul
{
list-style-type:none;
margin: 0; padding: 0;
margin-left:5px;
text-indent:6px;
}
h2
{
border:o; margin:0;
font-size:20px;
color:#e5007e;
}
/* button
---------------------------------------------- */
.button
{
display:block;
width: 130px;
height:16px;
line-height:16px;
margin-bottom:3px;
margin-left:0;
outline:none;
cursor:pointer;
text-align:left;
border: solid 1px #da7c0c;
font-size: 10px;
text-decoration:none;
-webkit-border-radius: .4em;
-moz-border-radius: .4em;
border-radius: .4em;
}
#footer
{
clear:both;
margin: 0;
}
#footer a {
float:right;
text-decoration:none;
font-size:13px;
color:#e5007e;
}
.button:hover {
text-decoration: none;
position: relative;
left: 2px;
}
.button:active {
text-decoration: none;
background-color:#9c9b9b;
}
.button.selected {
text-decoration: none;
background-color:#9c9b9b;
}
/* colour */
.cColour {
color:white;
background-color:#e5007e;
}
.cColour:hover {
color:white;
background-color:green;
}
.cColour:active {
color:white;
background-color:#9c9b9b;
}
最佳答案
我可以给你一个简单快捷的方法。在每个页面上放这个脚本:
如果您想要纯 Javascript:
<script>
document.getElementById("buttonID").className += " hover";
</script>
如果你想要 JQuery:
<script>
$(document).ready(function(){
$('#buttonID').addClass('hover');
});
</script>
hover 是您要在选择按钮时应用的类。请记住更改 buttonID。
页面加载后，它将在相应按钮上应用 hover 类。
关于html - CSS 在选择时更改按钮颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13880670/