0

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

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

3 回答 3

1

我可以给你一个快速简单的方法。在每一页上放这个脚本：

如果你想要纯 Javascript：

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

如果你想要 JQuery：

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

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

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

于 2012-12-14T16:05:43.537 回答
0

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

  1. 找出当前的 URL
  2. 将当前 URL 与菜单项的 URL 进行比较
  3. 如果它们相同，请给这个菜单项一个特殊的类，比如“活动”或“选择”你
    的 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
于 2012-12-14T15:02:27.807 回答
0

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

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

沿着这些路线的东西应该这样做，我不知道 asp 但逻辑就在那里。

于 2012-12-14T14:52:51.010 回答