网页结构建议（Jquery、.NET）答案

【问题标题】：Webpage structure suggestion (Jquery, .NET)网页结构建议（Jquery、.NET）
【发布时间】：2009-08-13 14:15:18
【问题描述】：

我有一个带有修复高级徽标和菜单的网页...而且我想在每次单击菜单时更改劣质内容，而不制作其他新的 Aspx...我的意思是，只有一个 Aspx...

页面结构：

-------Logo

-------Menu

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

我想要一些花哨/漂亮的建议……也许是一个 Jquery 插件？

谢谢

【问题讨论】：

标签： .net asp.net jquery

【解决方案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();
      });
 });

现在肯定有一些方法可以让过渡更漂亮等等，但这应该会给你一个很好的基础。

【讨论】：

【解决方案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>

【讨论】：