Question

我有一个包含3个链接的标头，所有链接都链接到具有相应ID的特定div：

body {
  font-size: 32px;
}

.links {
  display: flex;
  a {
    padding: 10px;
  }
}

.box:not(:target) {
  display: none;
}

#box1 {
  background-color: crimson;
}

#box2 {
  background-color: darkgreen;
}

#box3 {
  background-color: gold;
}

<div class="links">
  <a href="#box1">Box1</a>
  <a href="#box2">Box2</a>
  <a href="#box3">Box3</a>
</div>

<div class="box" id="box1">Box1 content</div>
<div class="box" id="box2">Box2 content</div>
<div class="box" id="box3">Box3 content</div>

我想使用CSS伪类将目标对象从display:none转换为display:block。我是使用.box:not(:target) { display:none }实现的。

问题是，如果:target仅在可能的css的三个框中不存在，我想默认将框显示为第一个框（＃box1），将不胜感激！< / p>

Answer 1

请按照以下代码段进行操作，希望您的问题可以通过html和css解决，

body {
  font-size: 32px;
}

.links {
  display: flex;
  a {
    padding: 10px;
  }
}

.box:not(:target) {
  display: none;
}
#box1{
  display: block;
}
#box2:target ~ #box1,
#box3:target ~ #box1{
  display: none;
}




#box1 {
  background-color: crimson;
  
}

#box2 {
  background-color: darkgreen;
}

#box3 {
  background-color: gold;
}

<div class="links">
  <a href="#box1">Box1</a>
  <a href="#box2">Box2</a>
  <a href="#box3">Box3</a>
</div>


<div class="box" id="box2">Box2 content</div>
<div class="box" id="box3">Box3 content</div>

<div class="box" id="box1">Box1 content</div>

box1是默认设置，当您触发box2，box3时，可以看到box1不会显示任何内容。主要用于“通用同级选择器（〜）”

Answer 2

创建名为BoxControl的新css类，以在触发显示/隐藏事件的所有<a>元素中考虑这一点。

然后添加.active css类，并将其添加到要在第一个视图中显示的元素的默认类列表中，如下所示。

最后，针对您的HTML结构实施JS，这是您的最佳选择，否则您将不得不修改HTML。

SCSS / JS

Codepen Link

CSS / JS

// Capture all elements of <a> 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 <a> 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;
}

<div class="links">
  <a href="#box1" class="boxControl">Box1</a>
  <a href="#box2" class="boxControl">Box2</a>
  <a href="#box3" class="boxControl">Box3</a>
</div>

<div class="box active" id="box1">Box1 content</div>
<div class="box" id="box2">Box2 content</div>
<div class="box" id="box3">Box3 content</div>

如果：target不存在，如何为元素设置默认样式

2 个答案:

SCSS / JS

CSS / JS