Webseite Strukturvorschlag (Jquery, .NET)

Question

Ich habe eine WebPage mit einem überragenden Logo und Menü ... Und ich möchte den minderwertigen Inhalt mit jedem Menüklick ändern, ohne andere neue Aspx ... I bedeuten, nur eine Aspx ...

Seitenstruktur:

-------Logo

-------Menu

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

Ich hätte gerne einen ausgefallenen/schönen Vorschlag ... Vielleicht ein Jquery-Plugin?

Dank

Answer 1

nur eine Show/jQuery verbergen für Ihre Inhalte

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(); 
     }); 
}); 

Jetzt gibt es definitiv einige Möglichkeiten, den Übergang bisschen besser zu machen und all das, aber das sollte dir eine gute Basis geben.

Answer 2

Ich nehme an, es hängt davon ab, wie viel Zeit Sie hineinlegen möchten. Sie können einfach ein update-Panel im Inhaltsbereich mit Conditional Updates halten. Die Menüpunkte wären die Auslöser. Diese Methode erfordert ein Ajax-Postback bei jedem Menüklick.

Lesen Sie hier: http://www.asp.net/Learn/ajax/tutorial-02-cs.aspx.

Eine weitere Option ist die Verwendung von versteckten divs. jQuery ist etwas auf der anderen Seite, etwas so Einfaches zu tun.

<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>