Databases
StackOverflow2013
Postsdbo
POIs there a elegant way to implement selectable tabs/menus in ASP.net
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIs there a elegant way to implement selectable tabs/menus in ASP.net
    text
    copied!<p>I am struggling to find a way of implementing a tab style menu system in ASP.net. The tabs look great from the HTML/CSS standpoint and are implemeted in the Master page so I don't have access to the body tag from the content page. what I am trying to work out is how to vary the "active tab" based upon the page the user is accessing.</p> <p>I can think of several ways of doing this:</p> <ol> <li>Dynamicly generate the HTML at each page load</li> <li>Manipulate the list items in the Page_Load</li> <li>Use jQuery to manipulate the selected tab class</li> </ol> <p>I have an additional problem which seems to make some solutions unsuitable; one tab may incoporate several different page names, so for example the Courses tab should be selected for both Default.aspx and CourseDetail.aspx.</p> <p>None of these seem particuarly elegant, I get the feeling that there is a better way of doing this in ASP.net but I don't know what I am looking (or searching) for.</p> <p>HTML:</p> <pre><code>&lt;div id="tabs"&gt; &lt;ul&gt; &lt;li class="selectedtab"&gt;&lt;a href="/"&gt;Courses&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;My Courses&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Administration&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>#head ul { list-style: none; padding:0; margin:0; } #head li { display: inline; border: solid; border-width: 1px 1px 0 1px; margin: 0 0.5em 0 0; background: #EEE; font-size: large; font-weight: bold; padding-top: 0.3em; } #head li a { padding: 0 1em; text-decoration: none; color: Black; } #head .selectedtab { padding-bottom: 1px; background: white; border-bottom: 1px solid white; } #tabs { text-align: right; width: 100%; border-bottom: 1px solid; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload