Tabs in aspx page
I need to put two tabs on my aspx page (c#). Is there already done tabs cont开发者_开发问答rol for aspx ?
Ajax has tabs you can use:
http://www.asp.net/ajax/ajaxcontroltoolkit/samples/tabs/tabs.aspx
jQuery also has tabs you could use, which in my opinion is the better choice:
http://jqueryui.com/demos/tabs/
In strictly ASP.NET you can use multiview, and make tabs, here is a tutorial for that:
http://www.codeproject.com/KB/custom-controls/TabControl.aspx
Bootstrap is commonly used with aspx so I used it on my webpage for tabs. This is a tutorial page.
Please find below an example for two tabs:
<div id="Tabs" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings tab</a></li>
<li><a href="#info" aria-controls="info" role="tab" data-toggle="tab">Information tab</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="settings">
</div>
<div role="tabpanel" class="tab-pane" id="info">
</div>
</div>
</div>
You need to have bootstrap.css and bootstrap.js references in page head section.
[Reposting my answer because 3 people felt the need to trash my first attempt. One person made it worse by making the URL opaque, so that you can't see it's w3schools.com, a known good tutorial site. Another criticized it for not providing context, like why its approach might be desirable. And a moderator deleted it summarily for none of the reasons I can see posts are supposed to be deleted. Go ahead and remove this commentary, but don't sandbag me and destroy my effort to help others from an ivory tower.]
If you want to send down all the tabs' contents and just have a locally (and instantly) swapped experience, I recommend https://www.w3schools.com/howto/howto_js_tabs.asp. You put your content in divs, and use just a tiny bit of JavaScript to swap out which one is visible. No extra/3rd-party component or framework, just simple HTML/JS that just works.
Super simplistic subset from the above: Content in divs like <div id="tab1">content</div>
, then show one with document.getElementById("tab1").style.display = "block";
and hide the others with none
instead of block
.
There is no standard ASP.NET component, but you can use Microsoft's ASP.NET AjaxControlToolkit library. Here is the component
You can create simple menus using CSS. This site shows you step by step how to create one, which you can then customise as required.
http://www.secondpicture.com/tutorials/web_design/css_ul_li_horizontal_css_menu.html
精彩评论