Question

我是网页新手，我正在创建一个简单的网站，其中有一些页面选择按钮。

该网站使用母版页和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;
}

Answer 1

我可以给你一个快捷简便的方法。在每个页面上放置此脚本：

如果你想要简单的Javascript：

<script>
     document.getElementById("buttonID").className += " hover";
</script>

如果你想要JQuery：

<script>
     $(document).ready(function(){
       $('#buttonID').addClass('hover');
     });
</script>

hover是您在选择按钮时要应用的类。请记住更改buttonID。

加载页面后，它将在相应按钮上应用hover类。

Answer 2

我不太了解，但如果您使用模板，那么我会使用这个原则：

使用您想要的样式在css中创建一个选定的类。
在每个页面上将page_id的变量设置为页面的任何内容，例如：page_id =“home” 3在每个标签上的导航模板中使用if语句，例如：if（page_id =“home”）print“class = selected”

这些方面应该做的事情，我不知道asp，但逻辑就在那里。

Answer 3

我对ASP一无所知，但这个概念在任何语言中都应该是相同的。工作流程如下：

找出当前网址
将当前网址与菜单项的网址
如果它们相同，请为此菜单项指定一个特殊类，例如“有效”或“已选择”。您的CSS应具有.active或.selected的规则

这是一篇有正确想法的帖子：
http://www.webdeveloper.com/forum/showthread.php?96221-Highlight-Menu-item-of-Current-Page-using-ASP

取自这篇文章：

function writeMenu()

    dim i,linkclass,pagename,myMenuItems()

    redim myMenuItems(4)

    myMenuItems(0) = Array("First Page","first.asp")
    myMenuItems(1) = Array("Second Page","second.asp")
    myMenuItems(2) = Array("Third Page","third.asp")
    myMenuItems(3) = Array("Fourth Page","fourth.asp")
    myMenuItems(4) = Array("Fifth Page","fifth.asp")

    pagename = getPageName()

    for i = 0 to ubound(myMenuItems)

        if ucase(myMenuItems(i)(1)) = pagename then
            linkclass = " class=""selected"""
        else
            linkclass = " class=""notselected"""
        end if      

        response.write "<a" & linkclass & " href=""" & myMenuItems(i)(1) & """>" & myMenuItems(i)(0) & "</a><br>"

    next

end function

function getPageName()

    dim scriptArr

    scriptArr = split(request.servervariables("script_name"),"/")

    getPageName = ucase(scriptArr(ubound(scriptArr)))

end function

选择CSS更改按钮颜色

3 个答案: