html - 从页脚打开一个链接，该链接打开一个显示特定菜单选项卡的页面

Question

我创建了一个带有指向不同页面的链接的页脚。

每个页面都有一个标签菜单，其中包含不同设备的规格。在下图中，我们有冰箱、冰柜和制冰机。页脚有所有这些的链接。现在我想要的是用户从页脚单击冷冻机并被定向到此页面，但冷冻机选项卡打开。我尝试了 html #id 但它不起作用并且冰箱选项卡已打开 - 同样在下面的页面中，选项卡是从另一个 js 文件导入的。

页脚的代码

<div><a href="/Cooling/">Refrigerator</a></div>
<div><a href="/Cooling">Freezer</a></div>
<div><a href="/Cooling/">Ice Maker</a></div>

菜单选项卡

<AppBar position="static" style={{backgroundColor: '#153f5f'}}>
        <Tabs 
          variant="fullWidth"
          value={value}
          onChange={handleChange}
          aria-label="nav tabs example"
          TabIndicatorProps={{ className: classes.indicator }}
        >
          <LinkTab label={<Typography className={classes.tabcolor}>Refrigerator</Typography>} {...a11yProps(0)} />
          <LinkTab label={<Typography className={classes.tabcolor}>Freezer</Typography>} {...a11yProps(1)} />
          <LinkTab label={<Typography className={classes.tabcolor}>Ice Maker</Typography>} {...a11yProps(2)} />
        </Tabs>
      </AppBar>
      <TabPanel value={value} index={0}>
          <div>
            <Troubleshooting/>
          </div> 
          <div>
            <ErrorCodes/>
          </div>
      </TabPanel>
      <TabPanel value={value} index={1}>
          <div>
            <Troubleshooting/>
          </div> 
          <div>
            <ErrorCodes/>
          </div>
      </TabPanel>
      <TabPanel value={value} index={2}>
          <div>
            <Troubleshooting/>
          </div> 
          <div>
            <ErrorCodes/>
          </div>
      </TabPanel>
    </div>

最后是必须打开链接的页面。

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import {Box} from '@material-ui/core';
import FridgeApp from '../Pages/Components/Images/FridgeApp.jpg';
import BookingBar from './Components/BookingBar';
import ApplianceTab from './Components/ApplianceTab-Cool';


const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    padding: '0em 1em'
  },
  paper: {
    padding: theme.spacing(1),
    textAlign: 'justify',
  },
  h1:{
    fontFamily: 'ubuntu',
    padding: '0.2em 0em',
    textAlign: 'left',
    color: 'rgb(0, 141, 206)',
    fontSize: '34px'
  },
  h2:{
    fontFamily: 'ubuntu',
    padding: '0.2em 0em',
    textAlign: 'left',
    color: 'grey',
    fontSize: '18px',
    lineHeight: '2em',
    paddingBottom: '2em'
  },
  image: {
    height: 'auto', 
    width: '75%',
  },
  gridSpace: {
    padding: '0em 2em',
  },
  bkBar: {
    padding: '1em 1em'
  },
  centerGrid:{
    display: 'flex', 
    justifyContent: 'center',
    paddingTop: '2em'
  },
}));

export default function OtherApp() {
  const classes = useStyles();
  return (
    <div>
        <div className={classes.root}>
            <Box elevation={12} container>
                <Grid className={classes.gridSpace} container spacing={0}>
                <Grid className={classes.pad} item xs={12} sm={12} md={5}>
                        <Box className={classes.centerGrid}>
                            <img src={FridgeApp} alt="FridgeApp" className={classes.image}/>  
                        </Box>
                    </Grid>
                    <Grid item xs={12} sm={12} md={7}>
                        <Box className={classes.paper}>
                            <h1 className={classes.h1}>Cooling Appliances</h1>
                            <p className={classes.h2}>
                            Cooling Appliances Repair Advice from The BMAS Experts.
                            <br/><br/>
                            <li>Find FAQ here.</li>
                            <li>Find FAQ here.</li>
                            <li>Find FAQ here.</li>
                            <li>Find FAQ here.</li>
                            <li>Find FAQ here.</li>
                            </p>
                        </Box>
                    </Grid>
                </Grid>
            </Box>
      </div>
{/* Appliance Tab */}
      <div>
        <ApplianceTab/>
      </div>
        <div className={classes.bkBar}> 
            <BookingBar/>   
        </div>
    </div>
   );    
}

我也尝试过 react-scroll 但我无法让它工作。