当前位置：首页 > JavaScript

js实现内容切换

2026-02-02 23:39:23JavaScript

使用innerHTML切换内容

通过修改DOM元素的innerHTML属性实现内容切换。这种方法适合简单的文本或HTML片段替换。

const element = document.getElementById('content');
element.innerHTML = '<p>新内容</p>';

使用textContent切换纯文本

若只需切换纯文本内容，使用textContent比innerHTML更安全，能避免XSS攻击。

const element = document.getElementById('content');
element.textContent = '新文本内容';

类名切换显示不同内容

通过CSS类名控制不同内容的显示状态，结合JavaScript切换类名。

.content-item { display: none; }
.content-item.active { display: block; }

document.querySelectorAll('.content-item').forEach(item => {
  item.classList.remove('active');
});
document.getElementById('new-content').classList.add('active');

使用dataset存储内容

在HTML元素上通过data-*属性存储备用内容，通过JavaScript读取切换。

<div id="content" data-alt="备用内容">主内容</div>

const content = document.getElementById('content');
content.textContent = content.dataset.alt;

动态加载外部内容

通过fetch API异步加载外部内容并插入DOM。

fetch('external-content.html')
  .then(response => response.text())
  .then(html => {
    document.getElementById('content').innerHTML = html;
  });

使用模板引擎

对于复杂内容切换，可以使用模板引擎如Handlebars。

<script id="template" type="text/x-handlebars-template">
  <div>{{content}}</div>
</script>

const template = Handlebars.compile(document.getElementById('template').innerHTML);
document.getElementById('container').innerHTML = template({ content: '动态内容' });

动画过渡效果

为内容切换添加动画效果增强用户体验。

.fade-in {
  animation: fadeIn 0.5s;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

const content = document.getElementById('content');
content.classList.add('fade-in');
content.innerHTML = '新内容';
setTimeout(() => content.classList.remove('fade-in'), 500);

使用Web Components

创建自定义元素封装内容切换逻辑。

class ContentSwitcher extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <slot name="content1"></slot>
      <slot name="content2" hidden></slot>
    `;
  }
  switchContent() {
    const content1 = this.shadowRoot.querySelector('slot[name="content1"]');
    const content2 = this.shadowRoot.querySelector('slot[name="content2"]');
    content1.hidden = !content1.hidden;
    content2.hidden = !content2.hidden;
  }
}
customElements.define('content-switcher', ContentSwitcher);

js实现内容切换