html+css+js新闻公告按页面按钮切换代码

以下是一个简单的示例代码，实现了通过按钮切换不同新闻公告内容：

HTML代码：

<div class="news">
  <div class="news-header">
    <button class="active" onclick="showNews('news1')">新闻1</button>
    <button onclick="showNews('news2')">新闻2</button>
    <button onclick="showNews('news3')">新闻3</button>
  </div>
  <div class="news-content">
    <div id="news1" class="news-item active">
      <h2>这是新闻1的标题</h2>
      <p>这是新闻1的内容</p>
    </div>
    <div id="news2" class="news-item">
      <h2>这是新闻2的标题</h2>
      <p>这是新闻2的内容</p>
    </div>
    <div id="news3" class="news-item">
      <h2>这是新闻3的标题</h2>
      <p>这是新闻3的内容</p>
    </div>
  </div>
</div>

CSS代码：

.news-header button {
  background-color: #eee;
  border: none;
  padding: 10px 20px;
  margin-right: 10px;
  cursor: pointer;
}

.news-header button.active {
  background-color: #ccc;
}

.news-content .news-item {
  display: none;
}

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

JS代码：

function showNews(newsId) {
  // 隐藏所有新闻内容
  var newsItems = document.querySelectorAll('.news-item');
  for (var i = 0; i < newsItems.length; i++) {
    newsItems[i].classList.remove('active');
  }

  // 显示指定的新闻内容
  var newsItem = document.getElementById(newsId);
  newsItem.classList.add('active');

  // 切换按钮的状态
  var buttons = document.querySelectorAll('.news-header button');
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].classList.remove('active');
  }
  var button = document.querySelector('.news-header button[data-news="' + newsId + '"]');
  button.classList.add('active');
}

这段代码中，我们通过 HTML 和 CSS 定义了一个新闻公告的基本结构和样式，然后通过 JS 实现了按钮的切换功能。当用户点击某个按钮时，我们会先隐藏所有的新闻内容，然后显示对应的新闻内容，并切换按钮的状态（将当前按钮设为激活状态，其它按钮设为非激活状态）。