Hey there! Let's get your dynamic product title display up and running with those existing Bootstrap nav tabs. Here's a straightforward approach using Bootstrap's built-in tab events and a bit of JavaScript:

Step 1: Prepare Your HTML #

First, add a dedicated container in your "展示区域" (display area) where the product title will appear. Give it a unique ID so we can easily target it with JavaScript:

<!-- Nav tabs START-->
<ul class="nav nav-tabs tabs-left sideways">
  <li><a href="#Computer Accessories" data-toggle="tab">Computer Accessories</a></li>
  <li><a href="#Electronic" data-toggle="tab">Electronic</a></li>
</ul>
<!-- Nav tabs END-->

<!-- Product Title Display Container -->
<div id="product-title-container" class="my-3">
  <!-- Dynamic title will load here -->
</div>

<!-- Your existing product display area -->
<div class="tab-content">
  <div class="tab-pane" id="Computer Accessories">...</div>
  <div class="tab-pane" id="Electronic">...</div>
</div>

Step 2: Add JavaScript Logic #

We'll use Bootstrap's shown.bs.tab event (triggers after a tab is fully shown) to update the title. We'll also map each tab ID to its corresponding product title for easy lookup:

// Map tab IDs to their respective product titles
const productTitleMap = {
  "#Computer Accessories": "Premium Computer Accessories for Every Setup",
  "#Electronic": "Cutting-Edge Electronic Gadgets & Devices"
};

// Listen for tab switch events
document.querySelectorAll('a[data-toggle="tab"]').forEach(tab => {
  tab.addEventListener('shown.bs.tab', function(e) {
    // Get the ID of the active tab
    const activeTabId = e.target.getAttribute('href');
    // Retrieve the matching title
    const activeTitle = productTitleMap[activeTabId] || "Product Title Unavailable";
    // Update the display container
    document.getElementById('product-title-container').textContent = activeTitle;
  });
});

// Set initial title for the first tab on page load
document.addEventListener('DOMContentLoaded', function() {
  const firstTabId = document.querySelector('.nav-tabs li:first-child a').getAttribute('href');
  document.getElementById('product-title-container').textContent = productTitleMap[firstTabId];
});

What This Does: #

• shown.bs.tab Event: Ensures we only update the title after the tab has finished switching, so there's no lag or mismatch.
• Title Mapping: Keeps your titles organized and easy to update later—just edit the productTitleMap object if you add new tabs.
• Initial Load Handling: Makes sure the first tab's title shows up immediately when the page loads, instead of leaving the container empty.

Alternative: jQuery Version (If You're Using Bootstrap 3/4) #

If your project already uses jQuery (common with older Bootstrap versions), here's a shorter version:

const productTitleMap = {
  "#Computer Accessories": "Premium Computer Accessories for Every Setup",
  "#Electronic": "Cutting-Edge Electronic Gadgets & Devices"
};

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
  const activeTabId = $(e.target).attr('href');
  $('#product-title-container').text(productTitleMap[activeTabId] || "Product Title Unavailable");
});

// Initialize on page load
$(document).ready(function() {
  const firstTabId = $('.nav-tabs li:first-child a').attr('href');
  $('#product-title-container').text(productTitleMap[firstTabId]);
});

That's it! Now when users switch between tabs, the corresponding product title will automatically update in your display area.

内容的提问来源于stack exchange，提问作者Kani R