我有一个带有修复高级徽标和菜单的WebPage ...我想用每个菜单点击更改劣质内容,而不是制作其他新的Aspx ...我的意思是,只有一个Aspx ... < / p>
页面结构:
-------Logo
-------Menu
-------Content 1, 2 ,3
我想要一些奇特/美丽的建议...也许是一个Jquery插件?
由于
答案 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>