Creating tabs using nothing but JQuery and CSS took some digging but I got it working. Here’s a snapshot of what it will look like at the end:
Your menu choices will probably be different but this article should give you all the code you need to get this done. This article assumes that you are fairly comfortable with MVC4 structure and JQuery/JavaScript usage.
Ok. Here we go. To start, Home, Create, Configure, Startup, and Maintenance are all separate controllers with their own view folder. Clicking on any of the tabs takes you to that controllers “Index” view. If that paragraph didn’t make sense, you need to pickup this book (Beginning MVC 4) and start reading.
The tabs exist in my _Layout.cshtml page as an unordered list. Here is the code:
<div id=”TabHeader”>
<ul id=”HorizontalTabs”>
<li id=”HorizontalTabsHome”><a href=”~/Home/Index”>Home</a></li>
<li id=”HorizontalTabsCreate”><a href=”~/Create/Index”>Create</a></li>
<li id=”HorizontalTabsConfigure”><a href=”~/Configure/Index”>Configure</a></li>
<li id=”HorizontalTabsStartup”><a href=”~/Startup/Index”>Startup</a></li>
<li id=”HorizontalTabsMaintenance”><a href=”~/Maintenance/Index”>Maintenance</a></li>
</ul>
</div>
Each index page also has a set of nested vertical tabs (which is why the Id specifies ‘Horizontal’). I will post another article on how to create vertical tabs in MVC4 in another post. Next up, you’re going to need the CSS for the Tabs.
ul#HorizontalTabs {
text-align: right;
padding: 0px;
font-size: 1.3em;
border-bottom: 1px solid #000;
}
ul#HorizontalTabs li {
display: inline;
list-style: none;
padding-left: 5px;
padding-right: 5px;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-top: 1px solid #000;
border-bottom: 0px solid #000;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
margin-right: 0px;
}
ul#HorizontalTabs li a {
color: #0066cc;
text-decoration: none;
}
ul#HorizontalTabs li a:hover {
color: #999;
text-decoration: none;
}
Phew! There goes a big chunk of typing (or if it formats nicely, copy and paste). Now we have an unordered list on our page and they should look like tabs. If you’ve updated the “HREF” for each tab, they should even click you through different pages in your site. But what about the bolded dark blue selected tab? And the line that should still disappear under the selected tab? Let’s remedy those problems.
First, we need to create a “Selected” CSS class. Here it is:
.SelectedHorizontalTab {
border-bottom: 1px solid #FFF !important;
font-weight: bold !important;
}
Great, but how do we apply the SelectedHorizontalTab class to the selected tab? To do that, we need some JQuery. If you just sighed… don’t worry. To add JQuery to your project, add this line of code inside the head on your _Layout page:
<script src=”http://code.jquery.com/jquery-2.0.0.min.js “></script>
Please note, the version will change over time (in fact, it probably already has). Check www.JQuery.com for updates.
Here’s the JQuery code. Add this to the body.
<script type=”text/javascript”>
function UpdateHeaderTabs(selected) {
var ConcatenatedSelectedTab = “#HorizontalTabs” + selected;
$(“#HorizontalTabsHome”).removeClass(“SelectedHorizontalTab”);
$(“#HorizontalTabsCreate”).removeClass(“SelectedHorizontalTab”);
$(“#HorizontalTabsConfigure”).removeClass(“SelectedHorizontalTab”);
$(“#HorizontalTabsStartup”).removeClass(“SelectedHorizontalTab”);
$(“#HorizontalTabsMaintenance”).removeClass(“SelectedHorizontalTab”);
$(ConcatenatedSelectedTab).addClass(“SelectedHorizontalTab”, 3000, “swing”);
}
</script>
What we’re doing in this chunk of code is removing the “Selected” class from all of the tabs. Then we add it back to the newly selected tab. You may ask yourself, how do we know which tab is selected? It’s passed through the variable “selected”. Next you may ask, but where/how do we call this function? And that is simple. We call it from each Index page. Here’s the code that should be copied to each page, updated with the appropriate tab text:
<script type=”text/javascript”>
$(function () {
UpdateHeaderTabs(“Create”);
});
</script>
This chunk of code will call the UpdateHeaderTabs function in the _Layout.cshtml page when the “Create/Index.cshtml” page is loaded. If you copy this code to each of your index pages and update the text submitted to the UpdateHeaderTabs function, you should have a set of tabs that look similar to the ones pictured at the top.
These tabs look good and function with all major browsers at their current release as of the publish time of this article. Enjoy!
Capt. Rochefort (Today is national “Talk Like A Pirate Day”, be sure to roll all of your ARRRRRRRRRRRRRs)
Filed under: .net, C#, CSS, JQuery, MVC4 Tagged: Build Tabs, CSS, Easy Tabs, How To, HTML5, Implement Tabs, JQuery, Simple Tabs, Tabs 
