Question

我目前停留在如何将链接（内部.html链接）分配给CSS中的.button:nth-child()类。我知道添加链接的唯一方法是通过HTML中的<a href="">，但它只适用于第一个nth:child，如您所见。任何解决方案（包括Js）都非常感谢。

HTML

<input type="checkbox" name="check" id="check"/>
<label for="check" id="tog"></label>
<div id="menu">
    <a href="index.html">
        <span class="button"></span>
    </a>
    <span class="button"></span>
    <span class="button"></span>
    <span class="button"></span>
</div>

CSS

#check:checked ~ #menu .button:nth-child(1) 
{
    background-image: url("pictures/homeicon.png");
    background-repeat:no-repeat;
    background-position: center center;
    background-size: cover;
    top: 8.6%;
    z-index: 100;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    transition: all 0.1s ease;
}
#check:checked ~ #menu .button:nth-child(2) 
{
    background-image: url("pictures/portfolio.png");
    background-repeat:no-repeat;
    background-position: center center;
    background-size: cover;
    top: 17.1%;
    z-index: 90;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
#check:checked ~ #menu .button:nth-child(3) 
{
    background-image: url("pictures/abouticon.png");
    background-repeat:no-repeat;
    background-position: center center;
    background-size: cover;
    top: 25.7%;
    z-index: 80;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#check:checked ~ #menu .button:nth-child(4) 
{
    background-image: url("pictures/connect.png");
    background-repeat:no-repeat;
    background-position: center center;
    background-size: cover;
    top: 34.2%;
    z-index: 70;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

非常感谢。

Answer 1

根据我对您的问题的理解，实现此目的的一种方法是在每个“按钮”上添加简单的Javascript。

<!doctype HTML>
<html>
<head>
    <script src="jquery-3.2.1.min.js"></script>
    <script src="test.js"></script>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
    <body>
       <input type="checkbox" name="check" id="check"/>
        <label for="check" id="tog"></label>
        <div id="menu">
        <a href="index.html">
            <span class="button">button</span>
        </a>
        <span class="button" onclick="location.href='http://google.com';">button2</span>
        <span class="button" onclick="location.href='http://yahoo.com';">button2</span>
        <span class="button" onclick="location.href='http://duckduckgo.com';">button2</span>
        </div>
    </body>
</html>

onclick="location.href='<some internal link>';"可让您重定向到您想要的位置。

Answer 2

get( path:string ){
    let token = this._ls.getToken();
    return this.http.get(`${this.sett.url}/${path}?token=${token}`)
                    .map(res => {
                      return res.json();
                    });
  }

等等，实际上并不清楚你的问题。只需将锚点添加到右侧的所有按钮

Answer 3

我不明白你所说的分配链接和你想要的东西。但我明白你想要什么。 1.如果你想通过班级按钮给出所有跨度的链接，你可以为所有人提供一个锚点。这是一个例子：

<div id="menu">
<a href="index.html">
<span class="button"></span>
</a>
<a href="index2.html">
<span class="button"></span>
</a>
<a href="index3.html"><span class="button"></span></a>
</div>

2。如果你想要所有跨度与url没有锚，这是一个例子：

    <div id="menu">
    <span class="button" onclick="wimdow.location.href='index1.html'"></span>
    <span class="button" onclick="wimdow.location.href='index2.html'"></span>
<span class="button" onclick="wimdow.location.href='index3.html'"></span>
    </div>

如果你想通过jquery添加链接，这里是例子：

$("#menu").children($('.button')).eq(0).click(function(){
  $('.button').eq(0).html('<a href="index.html">Link</a>');
});
$("#menu").children($('.button')).eq(1).click(function(){
  $('.button').eq(1).html('<a href="index2.html">Link2</a>');
});
$("#menu").children($('.button')).eq(2).click(function(){
  $('.button').eq(2).html('<a href="index3.html">Link3</a>');
});

/ *或者您可以使用此* /

$(".button").each(function(i,el){
  $(this).eq(i).html('<a href="index.html">Link'+i+'</a>');
});

添加CSS的链接：nth-child类

3 个答案:

添加CSS的链接：nth-​​child类

3 个答案:

添加CSS的链接：nth-child类