jQuery开发教程书，第71页4.小题动手练一练代码，制作一个商品网页导航栏的切换效果

在jQuery开发教程书中，第71页4.小题通常涉及实战练习，其目的是让你通过编写JavaScript代码来创建一个动态的商品网页导航栏切换效果。这种练习可能会教你如何使用jQuery库来操作DOM元素，比如添加或移除CSS类，以及响应用户交互。

下面是一个基本的步骤描述：

1. **HTML结构**：首先，你需要有一个包含多个链接的导航菜单，每个链接代表一个商品类别，例如：

<nav id="navbar">
  <ul>
    <li><a href="#" class="active">家居</a></li>
    <li><a href="#">数码</a></li>
    <li><a href="#">服装</a></li>
  </ul>
</nav>

2. **CSS样式**：给当前选中的导航项设置特定的样式，如`active`类：

#navbar ul li a {
  display: inline-block;
}
#navbar ul li.active a {
  color: red; /* 示例 */
}

3. **jQuery代码**：在页面加载完成后（通常是`$(document).ready()`），可以编写一段jQuery代码来监听导航链接的点击事件，当某链接被点击时，改变对应的CSS类，切换显示效果：

$(document).ready(function() {
  $('#navbar ul li a').click(function(e) {
    e.preventDefault(); // 阻止默认跳转
    $(this).parent().siblings().removeClass('active');
    $(this).addClass('active');
  });
});

这个例子中，当你点击导航链接时，其他链接会失去`active`类，被点击的链接获得该类并显示相应的样式变化。