创建“班级和个人信息.html”，使用路由和组件的知识实现 Tab 栏切换案例，在 页面显示“班级信息”和“个人信息”功能，被选中的路由链接高亮显示。 1. “班级信息”组件显示自己所在班级名称、专业和人数 2. “个人信息”组件显示自己的姓名、学号、性别、年龄

要实现这个案例，你可以使用前端框架如React或Vue，并结合路由管理库如React Router或Vue Router来实现页面的路由和组件的切换。这里我将给出一个基于React和React Router的简单示例。

首先，你需要安装React和React Router库：

npm install react react-dom react-router-dom

然后，你可以创建一个React项目，并设置路由和组件。以下是一个简单的示例代码：

// App.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';

// 创建班级信息组件
class ClassInfo extends Component {
  render() {
    return (
      <div>
        <h3>班级信息</h3>
        <p>班级名称：计算机科学与技术1班</p>
        <p>专业：计算机科学与技术</p>
        <p>人数：30</p>
      </div>
    );
  }
}

// 创建个人信息组件
class PersonalInfo extends Component {
  render() {
    return (
      <div>
        <h3>个人信息</h3>
        <p>姓名：张三</p>
        <p>学号：12345678</p>
        <p>性别：男</p>
        <p>年龄：20</p>
      </div>
    );
  }
}

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          {/* 导航栏 */}
          <ul>
            <li><Link to="/classinfo">班级信息</Link></li>
            <li><Link to="/personalinfo">个人信息</PersonalInfo></li>
          </ul>

          {/* 路由配置 */}
          <Switch>
            <Route path="/classinfo" component={ClassInfo} />
            <Route path="/personalinfo" component={PersonalInfo} />
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

在这个例子中，我们创建了两个组件`ClassInfo`和`PersonalInfo`，分别用于展示班级信息和个人信息。我们使用了`BrowserRouter`作为路由的容器，并通过`Link`组件来创建导航链接。`Switch`组件用于渲染与当前路径匹配的第一个`Route`。

要让被选中的路由链接高亮显示，你可以根据当前的路由动态添加类名。例如：

// 修改导航链接部分
<Link
  to="/classinfo"
  className={this.props.location.pathname === '/classinfo' ? 'active' : ''}
>
  班级信息
</Link>
<Link
  to="/personalinfo"
  className={this.props.location.pathname === '/personalinfo' ? 'active' : ''}
>
  个人信息
</Link>

在这个例子中，我们检查了当前的路由路径，并根据条件动态给`Link`组件添加了`active`类名。你需要在CSS中定义`active`类的样式，比如：

/* styles.css */
.active {
  color: #f00; /* 红色高亮显示 */
}

确保将CSS链接到你的React应用中。