How to set a default styling to element if :target doesn't exist

Question

I have a header with 3 links, all linking to a specific div with a corresponding id:

Answer 1

Create new css class called BoxControl consider this in all elements for trigger show/hide event.

Then Add .active css class and add it to default class list of the element you want to show in first view as shown bellow.

Finally, implement JS as for your HTML structure tell that is your best option otherwise you'll have to modify your HTML.

SCSS/JS

Codepen Link

CSS/JS

// Capture all elements of  output should be in an array
var box = document.getElementsByClassName("boxControl");

// Create new variable i stands for index to be used in for loop
var i;

// Loop through all elements been found in box variable  
for (i = 0; i < box.length; i++) {

// Add Event Listener of Click for  elements found in the variable box
  box[i].addEventListener("click", function(e) {

// Add e in callback function trace the element triggered this event
// In other words, which button has been clicked

var clicked = 
    e.target.getAttribute("href");

// Tricky bit: As per your request they should be at least
// one default active element otherwise or else will not remove any active class

    if (document.querySelector(".active")) { 
document.querySelector(".active").classList.remove("active");

// Use value of captured attribute (href) to target and toggle the new active class
document.querySelector(clicked).classList.toggle("active");  
  
// Not found any active css class (box)                                      
    } else {
var clicked = e.target.getAttribute("href");
document.querySelector(clicked).classList.toggle("active");  
}
    })
  };

body {
  font-size:32px;
}
.links {
  display:flex;
}
.links  a {
    padding:10px;
  }
.active {
  display:block!important;
}
#box1 {
  background-color:crimson;
  display: none;
}
#box2 {
  background-color:darkgreen;
  display: none;
}
#box3 {
  background-color:gold;
  display:none;
}

  Box1
  Box2
  Box3


Box1 content
Box2 content
Box3 content