js栏目切换

// HTML
<div id="section1" class="section active">Section 1</div>
<div id="section2" class="section">Section 2</div>

// CSS
.section { display: none; }
.section.active { display: block; }

// JavaScript
function switchSection(sectionId) {
    document.querySelectorAll('.section').forEach(function(el) {
        el.classList.remove('active');
    });
    document.getElementById(sectionId).classList.add('active');
}

// 事件委托示例
document.getElementById('container').addEventListener('click', function(event) {
    if (event.target.matches('.switch-btn')) {
        var sectionId = event.target.dataset.section;
        switchSection(sectionId);
    }
});

// 使用 jQuery 简化操作
$('.switch-btn').click(function() {
    var sectionId = $(this).data('section');
    $('.section').removeClass('active');
    $('#' + sectionId).addClass('active');
});