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

时间:2009-08-13 14:15:18

标签: .net asp.net jquery

我有一个带有修复高级徽标和菜单的WebPage ...我想用每个菜单点击更改劣质内容,而不是制作其他新的Aspx ...我的意思是,只有一个Aspx ... < / p>

页面结构:

-------Logo

-------Menu

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

我想要一些奇特/美丽的建议...也许是一个Jquery插件?

由于

2 个答案:

答案 0 :(得分:3)

只需使用jQuery show / hide作为您的内容

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

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

答案 1 :(得分:1)

我想这取决于您想要投入多少时间。您可以使用条件更新在内容区域中粘贴一个uppdate面板。菜单项将是触发器。此方法需要在每次单击菜单时进行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>