Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – selected tabs in different colors

I have a page with a link to another page with tabs.

<a href="https://example.com/page#span-01">Goal</a>

Here is the HTML

    <div id="builder_tabs" class="tab-buttons tab-buttons-left">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#builder_tabs-0" data-toggle="tab">
          <span id="span-00">Span00</span></a></li>
        <li><a href="#builder_tabs-1" data-toggle="tab">
          <span id="span-01">Span01</span></a></li> 
        <li><a href="#builder_tabs-2" data-toggle="tab">
          <span id="span-02">Span02</span></a></li>
        <li><a href="#builder_tabs-3" data-toggle="tab">
          <span id="span-03">Span03</span></a></li>
      </ul>
    <div class="clearboth"></div>
    </div>
<div class="tab-content">
    <div class="tab-pane fade active in" id="builder_tabs-0"><strong>Tab-0</strong>
        <p>Lorem Ipsum text</p>
    </div>
    <div class="tab-pane fade" id="builder_tabs-1"><strong>Tab-1</strong>   
        <p>Lorem Ipsum text</p>
    </div>      
    <div class="tab-pane fade" id="builder_tabs-2"><strong>Tab-2</strong>   
        <p>Lorem Ipsum text</p>
    </div>      
    <div class="tab-pane fade" id="builder_tabs-3"><strong>Tab-3</strong>   
        <p>Lorem Ipsum text</p>
    </div>
</div>

And the JQuery that works.

    (function($) {
   $(document).ready( function() {
        var query = window.location.hash.substring(1);
    if ($(query) ) {
        $("ul.nav.nav-tabs li").removeClass("active");
        $("#"+query).closest("li").addClass("active "+query );
        $(".tab-content").addClass(query).show();
        $(this).addClass(query).show();
    } 
    });
})(jQuery);

And with the CSS depending on the query. In this example, span-01

.tab-content.span-01, li.active.span-01 a { background-color: powderblue;}

Now that part is working, I also would like to change background color when I stay on the tabs page. With this code the background color of the selected tab is the same on every tab. And this is not the way it should work.

When I click on a tab, my idea is to retrieve the value of the span id ( I mean span-01,02,03 or 04 ) and keep this variable to add it into the tab-content class.

Any tips for doing this?

Tags:

2

Answers


  1. 0

    To achieve the behavior you described, where the background color of the selected tab is different for eachtab,you can modify your jQuery code to capture the span ID when a tab is clicked,and then use that information to set the appropriate background color.

    Here’s an updated version of your jQuery code:

    (function($) {
    $(document).ready(function() {
        // Function to set the background color based on the span ID
        function setTabBackgroundColor(spanId) {
            // Remove existing classes based on span IDs
            $(".tab-content").removeClass("span-00 span-01 span-02 span-03");
            // Add the class based on the provided span ID
            $(".tab-content").addClass(spanId);
        }

        // Initial check on page load
        var query = window.location.hash.substring(1);
        if ($(query)) {
            $("ul.nav.nav-tabs li").removeClass("active");
            $("#" + query).closest("li").addClass("active " + query);
            $(".tab-content").addClass(query).show();
            setTabBackgroundColor(query);
        }

        // Click event for tabs
        $("ul.nav.nav-tabs li a").on("click", function() {
            var spanId = $(this).find("span").attr("id");
            setTabBackgroundColor(spanId);
        });
    });
})(jQuery);

    with this code it introduces the setTabBackgroundColor function,which removes existing classes based on span IDs and adds the appropriate class based on the provided span ID.The click event for the tabs now calls this function to update the background color when a tab is clicked.Adjust the CSS accordingly for the different span IDs.

    Login or Signup to reply.
  2. 0

    Here is a much cleaner version that simplifies some of the logic and makes it more jQuery-like.

    Note: Since this snippet cannot access the fragment, I added a logical OR (||) to defer to tab "Span02" on the initial load. This can be removed from the code if you are running it on a local server.

    var $tabView = $('.tab-view');

// Let's simulate loading tab Span02
var tabId = window.location.hash.substring(1) || 'builder_tabs-2'
handleNavigation($tabView, tabId);

// Click handler
$tabView.on('click', '.nav-tabs a', function(e) {
  var tabId = new URL(this.href).hash.substring(1);
  handleNavigation($tabView, tabId);
});

function setActiveTab($tabView, tabId) {
  // Tabs
  $tabView
    .find('.tab-buttons .nav-tabs li')
    .removeClass('active')
    .find('a[href="#' + tabId + '"]')
    .closest('li')
    .addClass('active');
  // Panes
  $tabView
    .find('.tab-content .tab-pane')
    .removeClass('active')
    .filter('#' + tabId)
    .addClass('active');
}

function handleNavigation($tabView, tabId) {
  if (tabId) {
    setActiveTab($tabView, tabId);
  }
}
    :root {
  --border: thin solid darkblue;
  --tab-active: lightblue;
  --tab-inactive: lightgrey;
  --tab-inactive-hover: white;
  --tab-text-inactive-hover: black;
  --tab-text-active: darkblue;
  --tab-text-inactive: grey;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tab-view {
  display: flex;
  flex-direction: column;
  border: var(--border);
}

.tab-buttons ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.tab-buttons ul li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: lightgrey;
  flex: 1;
  margin: 0;
  background: var(--tab-inactive);
  color: var(--tab-text-inactive);
  border-bottom: var(--border);
}

.tab-buttons ul li:not(.active):hover {
  background: var(--tab-inactive-hover);
  color: var(--tab-text-inactive-hover);
}

.tab-buttons ul li.active {
  background: var(--tab-active);
  color: var(--tab-text-active);
  border-left: var(--border);
  border-right: var(--border);
  border-bottom: none;
  font-weight: bold;
}

.tab-buttons ul li:first-child {
  border-left: none;
}

.tab-buttons ul li:last-child {
  border-right: none;
}

.tab-buttons ul li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

.tab-buttons ul li a span {
  display: flex;
  flex: 1;
  padding: 0.5rem 1rem;
}

.tab-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tab-content .tab-pane {
  display: none;
  flex-direction: column;
  background: var(--tab-active);
  padding: 1rem;
}

.tab-content .tab-pane.active {
  display: flex;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="tab-view">
  <div id="builder_tabs" class="tab-buttons tab-buttons-left">
    <ul class="nav nav-tabs">
      <li class="active">
        <a href="#builder_tabs-0" data-toggle="tab">
          <span id="span-00">Span00</span>
        </a>
      </li>
      <li>
        <a href="#builder_tabs-1" data-toggle="tab">
          <span id="span-01">Span01</span>
        </a>
      </li>
      <li>
        <a href="#builder_tabs-2" data-toggle="tab">
          <span id="span-02">Span02</span>
        </a>
      </li>
      <li>
        <a href="#builder_tabs-3" data-toggle="tab">
          <span id="span-03">Span03</span>
        </a>
      </li>
    </ul>
    <div class="clearboth"></div>
  </div>
  <div class="tab-content">
    <div class="tab-pane fade active in" id="builder_tabs-0">
      <strong>Tab-0</strong>
      <p>Lorem Ipsum text</p>
    </div>
    <div class="tab-pane fade" id="builder_tabs-1">
      <strong>Tab-1</strong>
      <p>Lorem Ipsum text</p>
    </div>
    <div class="tab-pane fade" id="builder_tabs-2">
      <strong>Tab-2</strong>
      <p>Lorem Ipsum text</p>
    </div>
    <div class="tab-pane fade" id="builder_tabs-3">
      <strong>Tab-3</strong>
      <p>Lorem Ipsum text</p>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search