ウェブページの構造の提案（Jquery、.NET）

Question

私は修正の優れたロゴとメニューを備えたWebページを持っています...そして、私はメニューのクリックごとに下位の内容を変更したいと思います。意味、唯一のASPX ...

ページ構造：

-------Logo

-------Menu

-------Content 1, 2 ,3

それはいくつかのファンシー/美しい提案が好きです...おそらくJqueryのプラグインですか？

おかげ

Answer 1

ちょうどあなたのコンテンツのためのjQueryの表示/非表示を使用

HTML

<ul id="menu"> 
    <li><a href="#content1">show content 1</a></li> 
    <li><a href="#content2">show content 2</a></li> 
    <li><a href="#content3">show content 3</a></li> 
</ul> 
<div id="content1" class="content"> 
    Content 
</div> 
<div id="content2" class="content"> 
    More content 
</div> 
<div id="content3" class="content"> 
    Even more content 
</div> 

jQueryの

$(document).load(function(){ 
     $('div.content').hide(); 
     $('div#content1').show(); 
     $('ul#menu a').click(function(){ 
      var my_section = $(this).attr('href').substring(1); 
      $('div.content').hide(); 
      $('div#' + my_section).show(); 
     }); 
}); 

今遷移きれいにするためにいくつかの方法が間違いなくありますそしてそれはすべてですが、これはあなたに良い基盤を与えるはずです。

Answer 2

私はあなたがそれに入れたいと思う時間に依存していると思います。条件付き更新を使用して、コンテンツエリアにuppdateパネルを貼り付けるだけで済みます。メニュー項目がトリガーになります。このメソッドでは、各メニューのクリック時にajaxポストバックが必要です。

ここにお読みください：http://www.asp.net/Learn/ajax/tutorial-02-cs.aspx

もう1つの方法は、隠しdivを使用することです。 jQueryは非常にシンプルなことをするために少し重いです。

<script langauge="javascript"> 
function ShowContent(divID, otherDivID) 
{ 
    var myDiv = document.getElementById(divID); 
    var otherDiv = document.getElementById(otherDivID); 

    myDiv.style.display = 'block'; 
    otherDiv.style.display = 'none'; 
} 
</script> 
<a href="#" onclick="ShowContent('div1', 'div2');">Number 1</a> | <a href="#" onclick="ShowContent('div2', 'div1');">Number 2</a> 

<div id="div1">This is content 1</div> 
<div id="div2">This is content 2</div>