10

Visual Studio 2008 と ASP.NET 3.5 で Web サイトを作成しています。レイアウトを簡素化し、コンテンツとレイアウトではなくコンテンツのコンテンツ ページを保持するために、マスターページをセットアップしました。

ナビゲーションはリスト、css 化されているため、バーのように見えます。バーのページを強調表示するには、リスト項目を次のようにする必要があります<li id="current">。<asp:ContentPlaceHolder>避けられるなら使いたくない。これを達成するために、各ページ (またはマスターページだけに) に追加できるコードはあります<asp:ContentPlaceHolder>か?

4

7 に答える 7

13

Web.sitemap ファイルの使用を検討しましたか? それはそれを本当に簡単にします。サイトマップ ファイルが次のような場合...

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode>
    <siteMapNode url="~/Default.aspx" title="Home"  description="" />
    <siteMapNode url="~/Blog.aspx" title="Blog"  description="" />
    <siteMapNode url="~/AboutUs.aspx" title="AboutUs"  description="" />
  </siteMapNode>
</siteMap>

...次に、マスター ページでこれを実行して、必要な結果を得ることができます。

<asp:SiteMapDataSource ID="sitemapdata" runat="server" ShowStartingNode="false"  />
<ul id="navigation">
    <asp:Repeater runat="server" ID="navrepeater" DataSourceID="sitemapdata">
        <ItemTemplate>
            <li class="<%# SiteMap.CurrentNode.Equals(Container.DataItem) ? "activenav" : "inactivenav" %>"><a href="<%# DataBinder.Eval(Container.DataItem, "url") %>"><%# DataBinder.Eval(Container.DataItem, "title") %></a></li>
        </ItemTemplate>
    </asp:Repeater>
</ul>

現在のページの LI は「activenav」(または使用することを決めたもの) のクラスを持ち、他のページは「inactivenav」のクラスを持ちます。それに応じて CSS を記述できます。これは私が自分のサイトで使用しているテクニックで、うまく機能します。

于 2009-01-19T15:40:37.787 に答える
10

ページ セクションと呼ばれるマスター ページにプロパティを追加します。

public string PageSection { get; set; }

コンテンツ ページの上部に MasterType ページ ディレクティブを追加します。

<%@ MasterType VirtualPath="~/foo.master" %>

コンテンツ ページのコード ビハインドで、マスター ページの PageSection プロパティを設定します。

Master.PageSection = "home";

マスター ページで、ボディ タグをサーバー タグにします。

<body ID="bodyTag" runat="server">

マスター ページのコード ビハインドで、そのプロパティを使用して body タグにクラスを設定します。

bodyTag.Attributes.Add("class", this.PageSection);

各ナビゲーション アイテムに一意の ID 属性を与えます。

CSS で、現在のページ クラスに基づいてナビゲーション アイテムの表示を変更します。

.home #homeNavItem,
.contact #contactNavItem
{ 
    color: #f00; 
}
于 2008-10-09T16:54:20.727 に答える
3

これはセマンティック マッチングが優れており、どこでも同じクラスまたは ID を使用してナビゲーションを維持し、一致するように body 要素の ID のみを変更するように設定するのがより簡単な変数である可能性があります。

<li id="homeNav">home</li>
<li id="blogNav">blog</li>

そして、各ページで...

<body id="home">
<body id="blog">

そしてcssで：

#home #homeNav {background-image:url(homeNav-on.jpg);}
#blog #blogNav {background-image:url(blogNav-on.jpg);}
于 2008-10-09T20:28:17.847 に答える
0

ContentPlaceHolder の使用または不使用は、どの要素に id="current" が設定されているかには影響しません。

作成時にリストに id="current" を適切に追加するには、メニュー コンポーネントをレンダリングするときに、マスター ページのコード ビハインド、javascript 関数、またはその他のメソッドを調べる必要があります。

于 2008-10-09T16:48:15.763 に答える
0

masterpage コード クラスで保護された文字列プロパティを作成するのはどうですか? OnLoad をオーバーライドします。

protected string _bodyId;

protected override void OnLoad(EventArgs e)
{
    _bodyId = "your css id name";
}

次に、マスターページの aspx で:

<body id="<%= _bodyId %>">

そうすれば、CSS をいじる必要がなくなります。CSS がデザイン エージェンシーから提供されたものである場合は特に便利です。

于 2010-02-21T22:11:24.097 に答える
0

css クラスを追加して背景を変更することで、JQuery を使用して実現した方法を次に示します。

$("ul.nav > li > a:contains('<%= SiteMap.CurrentNode.ParentNode.Title %>')").addClass("navselected");

(Jquery)の " .nav" は、UL タグに適用される css クラスです。ul.nav

:containsul->li->a 内のすべての「a」タグ/要素の内容を、Menu に出力される ParentNode Title でチェックするのに役立ちます...

見つかった場合、navselected という名前の css クラスを特定の ul->li->a タグ/要素に適用します。

よろしく、 ミネシュ・シャー

システム プラス Pvt。株式会社

www.systems-plus.com

于 2013-09-05T10:36:54.453 に答える
-2

これを実現するにはJavaScriptを使用します。css で、#current をクラス (.current) に変更し、作成した各 ListItems に ID を設定します。次に、RegisterStartupScript を使用して、適切な ListItem を取得し、現在のスタイルを割り当てる JavaScript メソッドを呼び出します。Prototype を使用すると、これは $('MyPageLi').className = 'current'.

于 2008-10-09T16:49:19.800 に答える