Codechef4u is a community for computer professionals,by computer professionals,just like you; who loves sharing and helping each others,Join them
Share your post

Show or hide specific bootstrap tab with jQuery

The .nav-tabs class is used to generate a tabbed interface with nav-tabs as tabs in bootstrap.

Tab Nav

<ul class="nav nav-tabs">
          <li class="nav-item">
          <a class="nav-link active" href="#userList">User list </a>
          </li>
          <li class="nav-item">
          <a class="nav-link" href="#details">Details</a>
          </li>
          <li class="nav-item">
          <a class="nav-link" href="#rewards">Rewards</a>
        </li>
  </ul>

Tab content (Tab pane)

<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="userList" role="tabpanel" aria-labelledby="user-tab">some actual list data here..</div>
<div class="tab-pane fade" id="details" role="tabpanel" aria-labelledby="details-tab">some actual details data here…</div>
<div class="tab-pane fade" id="rewards" role="tabpanel" aria-labelledby="rewards-tab">Rewards data here...</div>
</div>    

 

jQuery Code to show specific tab

Show first tab

$(".nav-tabs a:first-child").tab("show");


Show 2nd tab

$(".nav-tabs a:nth-child(2)").tab("show"); 


Show last tab

$(".nav-tabs a:last").tab("show"); 

 

To hide tab simply remove active class from nav-item

$(".nav-tabs a.active").removeClass("active");

Add active class to layout bootstrap navbar in MVC

How to add an active class to my bootstrap navbar in MVC with?

Hers is code example,

Whenever nav links clicked "navHelperExtension" class MakeActiveClass method adds active class to nav list item.

<ul id="topMenu" class="navbar-nav">
<li id="navHome" class="@navHelperExtension.MakeActiveClass("Index", "Home")">
<a id="acHome" class="nav-link" href="@Url.Action("Index", "Home")">Home </a>
</li>
<li id="navAbout" class="@navHelperExtension.MakeActiveClass("About","Home")">
<a id="acAbout" class="nav-link" href="@Url.Action("About", "Home")">About us </a>
</li>
<li id="navTeam" class="@navHelperExtension.MakeActiveClass("Team","Details")">
<a id="acTeam" class="nav-link" href="@Url.Action("Team", "Details")">Our Team</a>
 </li>
<li id="navContact" class="@navHelperExtension.MakeActiveClass("Contact","Details")">
<a id="acContact" class="nav-link" href="@Url.Action("Contact", "Details")">Contact </a>
 </li>
</ul>

C# static class and method to make current selected controller link active

public static class
navHelperExtension
    {
  public static string MakeActiveClass(string controller)
        {
            System.Web.Mvc.UrlHelper urlHelper= ((System.Web.Mvc.WebViewPage)WebPageContext.Current.Page).Url;
 
            string result = "nav-item active";
 
       string controllerName =urlHelper.RequestContext.RouteData.Values["controller"].ToString();
 
            if (!controllerName.Equals(controller, StringComparison.OrdinalIgnoreCase))
            {
                result = "nav-item";
            }
 
            return result;
        }
}

Display loading progress bar (or wait progress) for MVC server-side calls in jQuery

With following JavaScript call back function sample, you can display progress for .net MVC non ajax server calls.

Note: Add default “DisplayProgressClass” to div

JavaScript code example,

initializeCallAndProgres (userHideProgress);
function initializeCallAndProgres(callback) {
            setTimeout(function () {
                //page js logic
                JsPageData();
                if (typeof callback == 'function')
                   //call back to stop progress
                    callback();
            }, 1500);
        };

 

var userEndprogress = function () //here
to stop progress, remove progress class
    addOrRemoveClass(false, "#dvPageProgress", "DisplayPogressClass");