jquery百度新闻导航条

可以使用以下代码实现一个简单的jQuery百度新闻导航条：

HTML代码：

<ul id="nav">
  <li><a href="#">头条</a></li>
  <li><a href="#">娱乐</a></li>
  <li><a href="#">体育</a></li>
  <li><a href="#">科技</a></li>
</ul>

<div id="content">
  <div class="news" id="news1">
    <h2>头条新闻</h2>
    <p>这是一条头条新闻的内容。</p>
  </div>
  <div class="news" id="news2">
    <h2>娱乐新闻</h2>
    <p>这是一条娱乐新闻的内容。</p>
  </div>
  <div class="news" id="news3">
    <h2>体育新闻</h2>
    <p>这是一条体育新闻的内容。</p>
  </div>
  <div class="news" id="news4">
    <h2>科技新闻</h2>
    <p>这是一条科技新闻的内容。</p>
  </div>
</div>

CSS代码：

#nav li {
  display: inline;
  margin-right: 10px;
}

.news {
  display: none;
}

jQuery代码：

$(document).ready(function() {
  // 默认显示第一条新闻
  $('#news1').show();

  // 导航条点击事件
  $('#nav li a').click(function(e) {
    e.preventDefault();

    // 获取当前点击的导航项的索引
    var index = $(this).parent().index();

    // 隐藏所有新闻内容
    $('.news').hide();

    // 显示对应索引的新闻内容
    $('#news' + (index + 1)).show();
  });
});

这段代码创建了一个带有导航条和新闻内容的简单页面。导航条是一个无序列表，每个导航项都是一个链接。新闻内容被包裹在带有唯一ID的`div`中。

使用jQuery，我们通过点击导航项来切换显示相应的新闻内容。点击导航项时，我们获取其索引，根据索引找到对应的新闻内容，并将其显示出来，同时隐藏其他新闻内容。

你可以根据需要修改HTML、CSS和jQuery代码来适应你的实际需求。