如何基于首页参数动态生成网页Usecase标签与Scene子标签

Got it, let's walk through how to build this dynamic tab system step by step. We'll use vanilla JavaScript for simplicity, covering both passing data from the homepage to the second page and rendering the tabs/content dynamically.

1. Pass Homepage Parameters to the Second Page #

First, on your homepage, you need to send the usecase/scene data to the second page. URL query parameters are a straightforward choice here (you can use localStorage too if you prefer, but params are more transparent for this scenario).

Suppose your homepage has these variables:

// Homepage JS variables
const usecases = [
  { id: 1, sceneCount: 3 }, // Usecase 1 has 3 scenes
  { id: 2, sceneCount: 4 }, // Usecase 2 has 4 scenes
  { id: 3, sceneCount: 2 }, // Usecase 3 has 2 scenes
  { id: 4, sceneCount: 1 }  // Usecase 4 has 1 scene
];

Add a link or button to navigate to the second page, encoding the data into the URL:

<!-- Homepage link -->
<a href="second-page.html?data=${encodeURIComponent(JSON.stringify(usecases))}">Go to Second Page</a>

Or use a button with an onClick handler:

document.getElementById('navigate-btn').addEventListener('click', () => {
  const dataStr = encodeURIComponent(JSON.stringify(usecases));
  window.location.href = `second-page.html?data=${dataStr}`;
});

2. Read and Parse Parameters on the Second Page #

On the second page, grab the data from the URL and convert it back into a usable JavaScript object:

// Second Page JS
const urlParams = new URLSearchParams(window.location.search);
const usecaseData = JSON.parse(decodeURIComponent(urlParams.get('data')));

3. Generate Usecase Tabs Dynamically #

Create the top-level Usecase tab list by targeting an empty container in your HTML:

<!-- Second Page HTML: Empty container for usecase tabs -->
<div id="usecase-tabs-container"></div>

// Generate Usecase tabs
const usecaseTabsContainer = document.getElementById('usecase-tabs-container');

// Create the tab list wrapper
const usecaseTabList = document.createElement('ul');
usecaseTabList.setAttribute('role', 'tablist');
usecaseTabList.className = 'ibm-tabs';
usecaseTabList.setAttribute('aria-label', 'Tab navigation');

// Loop through each usecase to build tabs
usecaseData.forEach((usecase, index) => {
  const li = document.createElement('li');
  li.setAttribute('role', 'presentation');
  
  const link = document.createElement('a');
  link.setAttribute('role', 'tab');
  link.href = `#usecase-${usecase.id}`;
  link.textContent = `Usecase ${usecase.id}`;
  
  // Mark the first tab as active by default
  if (index === 0) {
    link.setAttribute('aria-selected', 'true');
  }
  
  li.appendChild(link);
  usecaseTabList.appendChild(li);
});

usecaseTabsContainer.appendChild(usecaseTabList);

4. Generate Scene Tabs and Corresponding Content #

Next, build the Scene tabs and their content areas for each Usecase. Add another empty container to your HTML:

<!-- Second Page HTML: Empty container for scene tabs and content -->
<div id="scene-content-container"></div>

Then write the JS to generate the scene tabs and input fields:

const sceneContentContainer = document.getElementById('scene-content-container');

usecaseData.forEach(usecase => {
  // Create a wrapper for the usecase's scene tabs and content
  const usecaseWrapper = document.createElement('div');
  usecaseWrapper.id = `usecase-${usecase.id}`;
  
  // Build the scene tab list
  const sceneTabList = document.createElement('ul');
  
  // Add the Intro Page tab first
  const introTab = document.createElement('li');
  const introLink = document.createElement('a');
  introLink.setAttribute('aria-selected', 'true');
  introLink.setAttribute('role', 'tab');
  introLink.href = `#usecase-${usecase.id}-intro`;
  introLink.textContent = 'Intro Page';
  introTab.appendChild(introLink);
  sceneTabList.appendChild(introTab);
  
  // Add Scene tabs based on the scene count
  for (let i = 1; i <= usecase.sceneCount; i++) {
    const sceneTab = document.createElement('li');
    const sceneLink = document.createElement('a');
    sceneLink.setAttribute('role', 'tab');
    sceneLink.href = `#usecase-${usecase.id}-scene-${i}`;
    sceneLink.textContent = `Scene ${i}`;
    sceneTab.appendChild(sceneLink);
    sceneTabList.appendChild(sceneTab);
  }
  
  usecaseWrapper.appendChild(sceneTabList);
  
  // Create the content area wrapper
  const contentWrapper = document.createElement('div');
  contentWrapper.className = 'ibm-col-4-3 ibm-col-medium-5-3';
  
  // Add Intro Page content
  const introContent = document.createElement('div');
  introContent.id = `usecase-${usecase.id}-intro`;
  introContent.className = 'ibm-tabs-content';
  
  const introLabel = document.createElement('label');
  introLabel.setAttribute('for', `usecase-${usecase.id}-desc`);
  introLabel.className = 'ibm-textcolor-green-60';
  introLabel.innerHTML = 'Use case description<span class="ibm-required">*</span>';
  
  const inputSpan = document.createElement('span');
  const input = document.createElement('input');
  input.type = 'text';
  input.value = '';
  input.size = 70;
  input.id = `usecase-${usecase.id}-desc`;
  input.name = `usecase-${usecase.id}-desc`;
  input.required = true;
  
  inputSpan.appendChild(input);
  introContent.appendChild(introLabel);
  introContent.appendChild(inputSpan);
  contentWrapper.appendChild(introContent);
  
  // Add content for each Scene
  for (let i = 1; i <= usecase.sceneCount; i++) {
    const sceneContent = document.createElement('div');
    sceneContent.id = `usecase-${usecase.id}-scene-${i}`;
    sceneContent.className = 'ibm-tabs-content';
    
    // Replicate your input field structure for each scene
    const sceneLabel = document.createElement('label');
    sceneLabel.setAttribute('for', `usecase-${usecase.id}-scene-${i}-input`);
    sceneLabel.className = 'ibm-textcolor-green-60';
    sceneLabel.innerHTML = `Scene ${i} Input<span class="ibm-required">*</span>`;
    
    const sceneInputSpan = document.createElement('span');
    const sceneInput = document.createElement('input');
    sceneInput.type = 'text';
    sceneInput.value = '';
    sceneInput.size = 70;
    sceneInput.id = `usecase-${usecase.id}-scene-${i}-input`;
    sceneInput.name = `usecase-${usecase.id}-scene-${i}-input`;
    sceneInput.required = true;
    
    sceneInputSpan.appendChild(sceneInput);
    sceneContent.appendChild(sceneLabel);
    sceneContent.appendChild(sceneInputSpan);
    contentWrapper.appendChild(sceneContent);
  }
  
  usecaseWrapper.appendChild(contentWrapper);
  sceneContentContainer.appendChild(usecaseWrapper);
});

5. Add Tab Switching Functionality (Optional) #

To make tabs actually switch content when clicked, add this simple handler:

// Handle tab selection
document.querySelectorAll('[role="tab"]').forEach(tab => {
  tab.addEventListener('click', (e) => {
    e.preventDefault();
    
    // Deselect all tabs
    document.querySelectorAll('[role="tab"]').forEach(t => {
      t.setAttribute('aria-selected', 'false');
    });
    
    // Hide all content areas
    document.querySelectorAll('.ibm-tabs-content').forEach(content => {
      content.style.display = 'none';
    });
    
    // Activate current tab and show its content
    tab.setAttribute('aria-selected', 'true');
    const targetContent = document.querySelector(tab.getAttribute('href'));
    if (targetContent) targetContent.style.display = 'block';
  });
});

// Show the first content area by default
document.querySelector('.ibm-tabs-content').style.display = 'block';

Notes #

• If you're using a framework like React or Vue, you can adapt this logic to use state and component rendering instead of vanilla DOM manipulation.
• For sensitive data, use localStorage instead of URL params (since params are visible in the address bar).

内容的提问来源于stack exchange，提问作者Suraj Prasad