移植XAML/C#程序至Web：如何用JS实现焦点选项卡行移至底部？

Got it, let's solve this! You want to replicate that XAML TabControl behavior where clicking a tab moves it to the bottom of the tab row—here's how to adjust your existing w3css tab script to make this work:

Step 1: Update Your Tab Button Onclick Handlers #

First, modify each tab button's onclick to pass both the target tab name and the button itself (using this). For example:

<button class="w3-tab" onclick="OpenTab('tab1', this)">Tab 1</button>
<button class="w3-tab" onclick="OpenTab('tab2', this)">Tab 2</button>
<button class="w3-tab" onclick="OpenTab('tab3', this)">Tab 3</button>

Step 2: Modify the OpenTab Function #

Update your function to handle moving the clicked tab to the bottom after switching content. Here's the full adjusted code:

function OpenTab(tabName, activeTabBtn) {
  var i;
  var tabSections = document.getElementsByClassName("tabSection");
  
  // 1. Hide all tab sections (original w3css logic)
  for (i = 0; i < tabSections.length; i++) {
    tabSections[i].style.display = "none";
  }
  
  // 2. Remove active styling from all tab buttons
  var allTabButtons = document.getElementsByClassName("w3-tab");
  for (i = 0; i < allTabButtons.length; i++) {
    // Adjust these classes to match your w3css active tab styling
    allTabButtons[i].classList.remove("w3-light-grey", "w3-border-bottom");
  }
  
  // 3. Show the target tab section
  document.getElementById(tabName).style.display = "block";
  
  // 4. Move the clicked tab button to the bottom of its container
  var tabContainer = activeTabBtn.parentElement;
  // If your buttons are nested inside a sub-element, use closest() instead:
  // var tabContainer = activeTabBtn.closest(".w3-bar");
  tabContainer.removeChild(activeTabBtn);
  tabContainer.appendChild(activeTabBtn);
  
  // 5. Apply active styling to the moved button
  activeTabBtn.classList.add("w3-light-grey", "w3-border-bottom");
}

Key Notes: #

• Passing this: This lets us directly reference the clicked button without extra ID lookups, keeping the code simple.
• Container Flexibility: If your tab buttons are nested inside a wrapper (like a .w3-bar), use closest(".your-container-class") instead of parentElement to reliably find the tab row container.
• Styling Adjustments: Tweak the class names (like w3-light-grey) to match whatever active state styling you're using for your tabs.

内容的提问来源于stack exchange，提问作者Matt McManis