编辑：

如果您需要在单击其他位置时保持焦点，using a hidden check box可以完成这项工作。因为你只想关注一个，你可以把它改为半径框。

.navbar-container {
    display: flex;
    justify-content: center;
    
}

.navbar-wrapper {
    font-size: 13px;
    margin: 20px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 5em;
    background-color: lightgrey;
    width: 18.8em;
    height: 3em;
    
}

.nav-anchor {
    text-decoration: none;
    color: black;
    cursor: pointer;
    
}

.text-radius {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.8em;
    height: 2.5em;
    border-radius: 5em;
}

.home-radius:focus-within{
    background-color: white;
}

.profile-radius:focus-within{
    background-color: white;
}

.contact-radius:focus-within{
    background-color: white;
}

.navbar-wrapper input[type=radio]{
    display: none;
}

.navbar-wrapper input[type=radio]:checked + .text-radius{
    background-color: white;
}

<div class="navbar-container">
    <div class="navbar-wrapper">
        <input type="radio" name="rGroup" value="1" id="r1" checked="checked" />
        <label class="text-radius contact-radius nav-anchor" for="r1" onclick='window.location.assign("#")'> Home </label>
        <input type="radio" name="rGroup" value="2" id="r2" />
        <label class="text-radius contact-radius nav-anchor" for="r2" onclick='window.location.assign("#Profile")'>Profile</label>
        <input type="radio" name="rGroup" value="3" id="r3" />
        <label class="text-radius contact-radius nav-anchor" for="r3" onclick='window.location.assign("#Contact")'>Contact</label>
    </div>
</div>

要使div可聚焦，您可以在其上添加tabindex，并使用focus选择器。请注意，在你的结构中，点击<a>不会聚焦在div上，要解决这个问题，你可以使用focus-within选择器：

.navbar-container {
    display: flex;
    justify-content: center;
    
}

.navbar-wrapper {
    font-size: 13px;
    margin: 20px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 5em;
    background-color: lightgrey;
    width: 18.8em;
    height: 3em;
    
}

.nav-anchor {
    text-decoration: none;
    color: black;
    
}

.text-radius {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.8em;
    height: 2.5em;
    border-radius: 5em;
}

.home-radius:focus-within{
    background-color: white;
}

.profile-radius:focus-within{
    background-color: white;
}

.contact-radius:focus-within{
    background-color: white;
}

<div class="navbar-container">
    <div class="navbar-wrapper">
        <div class="text-radius home-radius" tabindex="0">
            <p><a href="#" class="nav-anchor">Home</a></p>
        </div>
        <div class="text-radius profile-radius" tabindex="1">
            <p><a href="#profile" class="nav-anchor">Profile</a></p>
        </div>
        <div class="text-radius contact-radius" tabindex="2">
            <p><a href="#contact" class="nav-anchor">Contact</a></p>
        </div>
    </div>
</div>