网页结构建议(Jquery，.NET)

Question

我有一个带有修复高级徽标和菜单的WebPage。而且我想通过每次点击菜单来改变劣质内容，而不是制作其他新的Aspx…我是说，只有一个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

我想这取决于你想投入多少时间。您可以简单地使用条件更新将更新面板粘贴到内容区域。菜单项将是触发器。此方法需要在每次单击菜单时进行ajax回发。

请在此处阅读：http://www.asp.net/Learn/ajax/tutorial-02-cs.aspx。

另一种选择是使用隐藏的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>