0

私はWebページを初めて使用し、ページセレクターボタンがいくつかある単純なWebサイトを作成しています。

Webサイトはマスターページと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ボタンが選択されたときに適用するクラスです。buttonID を忘れずに変更してください。

ページが読み込まれるとhover、それぞれのボタンにクラスが適用されます。

于 2012-12-14T16:05:43.537 に答える
0

すぐにはわかりませんが、テンプレートを使用している場合は、次の原則を使用します。

  1. 必要なスタイルを使用して、css で選択したクラスを作成します。
  2. 各ページで、page_id の変数をページが何であれ設定します。例: page_id="home"

これらの行に沿った何かがそれを行う必要があります.aspはわかりませんが、ロジックはそこにあります。

于 2012-12-14T14:52:51.010 に答える
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 に答える