html - 当您单击其中一个框时，它会更改颜色并保持该颜色

Question

我的 section3holdingbox 中有 3 个框，我想要它，所以如果用户单击其中一个框，它会更改为较深的红色阴影并让它保持这种状态，直到他单击另一个框。对于要预先选择的第一个框，也有一个较深的红色。到目前为止，这是我的代码，我无法让它工作

HTML: 

<div class="section3HoldingBox">

<div class="section3Box1">
        <a href="#section3"><div class="section3BoxTitleBasic">Basic</div> <!-- end of section3BoxTitleBasic -->
</div></a><!-- end of section3Box1 -->

<div class="section3Box2">
        <div class="section3BoxTitleComingSoon">Professional</div> <!-- end of section3BoxTitles -->
</div> <!-- end of section3Box2 -->

<div class="section3Box3">
        <div class="section3BoxTitleComingSoon">Deluxe</div> <!-- end of section3BoxTitles -->
</div> <!-- end of section3Box3 --> 


</div> <!-- end of section3HoldingBox -->

CSS:

.section3HoldingBox {

    width: 1350px;
    height: 210px;
    margin: 25px auto 0;
    padding: 0;
    border: blue 2px solid;
}

.section3HoldingBox a {
    text-decoration: none;
}

.section3HoldingBox a:active {

}

.section3Box1 {
    width: 300px;
    height: 200px;
    border-radius: 9px;
    border: 2.2px rgba(231, 76, 60, .38) solid;
    background-color: rgba(231, 76, 60, .2);
    float: left;

    -webkit-transition: .5s ease-in-out;
    -moz-transition:.5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;

}

.section3Box2 {
    float: left;
    margin-left: 219px;
    text-align: center;
    width: 300px;
    height: 200px;
    border-radius: 9px;
    border: 2.2px rgba(231, 76, 60, .38) solid;
    background-color: rgba(231, 76, 60, .12);



    -webkit-transition: .5s ease-in-out;
    -moz-transition:.5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

.section3Box3 {
    float: left;
    margin-left: auto;
    width: 300px;
    height: 200px;
    border-radius: 9px;
    border: 2.2px rgba(231, 76, 60, .38) solid;
    background-color: rgba(231, 76, 60, .12);
    float: right;

    -webkit-transition: .5s ease-in-out;
    -moz-transition:.5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

.section3Box1:hover, .section3Box2:hover, .section3Box3:hover {
    border: 2.2px rgba(231, 76, 60, .83) solid;
    background-color: rgba(231, 76, 60, .17)
}

Answer 1

CSS :target 伪类是解决此类问题的有效方法。

设置好:target 伪类样式规则后，您还需要添加一个简短的单行javascript，这样第一个框就会被预选窗口加载。

function initialise() {
	window.location.hash = 'box1';
}


window.onload = initialise();

.section3HoldingBox {
    width: 1350px;
    height: 210px;
    margin: 25px auto 0;
    padding: 0;
    border: blue 2px solid;
}

.section3HoldingBox a {
    text-decoration: none;
}

.section3Box1 {
    width: 300px;
    height: 200px;
    border-radius: 9px;
    border: 2.2px rgba(231, 76, 60, .38) solid;
    background-color: rgba(231, 76, 60, .2);
    float: left;

    -webkit-transition: .5s ease-in-out;
    -moz-transition:.5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

.section3Box2 {
    float: left;
    margin-left: 219px;
    text-align: center;
    width: 300px;
    height: 200px;
    border-radius: 9px;
    border: 2.2px rgba(231, 76, 60, .38) solid;
    background-color: rgba(231, 76, 60, .12);

    -webkit-transition: .5s ease-in-out;
    -moz-transition:.5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

.section3Box3 {
    float: left;
    margin-left: auto;
    width: 300px;
    height: 200px;
    border-radius: 9px;
    border: 2.2px rgba(231, 76, 60, .38) solid;
    background-color: rgba(231, 76, 60, .12);
    float: right;

    -webkit-transition: .5s ease-in-out;
    -moz-transition:.5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

.section3Box1:hover, .section3Box2:hover, .section3Box3:hover {
    border: 2.2px rgba(231, 76, 60, .83) solid;
    background-color: rgba(231, 76, 60, .17)
}

div[id^=box] a {
display: block;
height: 100%;
text-align: center;
}

div[id^=box]:target {
    border: 2.2px rgba(63, 0, 0, 1) solid;
    background-color: rgba(127, 0, 0, 1)
}

div[id^=box]:target a {
    color: rgba(255, 255, 255, 1)
}

<div class="section3HoldingBox">

<div class="section3Box1" id="box1">
<a href="#box1">
<div class="section3BoxTitleBasic">Basic</div>
</a>
</div>

<div class="section3Box2" id="box2">
<a href="#box2">
<div class="section3BoxTitleComingSoon">Professional</div>
</a>
</div>

<div class="section3Box3" id="box3">
<a href="#box3">
<div class="section3BoxTitleComingSoon">Deluxe</div>
</a>
</div>

</div>