Question

如何使“1”变为可变/动态。当我点击第二个按钮时，“1”将变为“2”

#button li:nth-child(1) a {
background-color: #5cb85c;
}
#button li:nth-child(1) a:before {
border-color: #5cb85c;
border-left-color: transparent;
}
#button li:nth-child(1) a:after {
border-left-color: #5cb85c;
}

第一个css类正在使用

$("#button li:nth-child(2) a").css("background-color", "#5cb85c");

虽然：之前和之后不是。

或任何其他解决方案都可以。当我单击第二个按钮时，将应用相同的css集。并在第3个按钮。等等。

谢谢！

来自@giorgio的

解决方案

最后经过giorgio解决方案的大量尝试后，根据我的示例css，它是如何工作的。

.button-select a {
background-color: #5cb85c !important;
}
.button-select a:before {
border-color: #5cb85c !important;
border-left-color: transparent !important;
}
.button-select a:after {
border-left-color: #5cb85c !important;
}

我需要添加！important来覆盖默认样式。然后在我的onClick上，

$('#buttons li').eq(n).toggleClass('button-select');

n是<li>

中<ul id = "buttons">的索引

Answer 1

最简单的解决方案不是使用<?php session_start(); require 'config.php'; require '../src/facebook.php'; // Create our Application instance (replace this with your appId and secret). $facebook = new Facebook(array( 'appId' => $config['App_ID'], 'secret' => $config['App_Secret'], 'default_graph_version' => 'v2.1', 'cookie' => true )); $token_url = "https://graph.facebook.com/oauth/access_token?" ."client_id=".$config['App_ID']."&redirect_uri=".urlencode($config['callback_url']) ."&client_secret=".$config['App_Secret']."&code=".$_GET['code']; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $token_url); curl_setopt($ch, CURLOPT_HEADER, 0); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST,0); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER,0); $html = curl_exec($ch); curl_close($ch); echo $html; ?>，而是设置几个类并在其上应用:nth-child() / ::before:选择器。例如;

::after

现在使用jQuery / javascript查找要更改的元素并切换类。例如;

.background-red::before { background: red; }
.background-blue::before { background: blue; }

更改伪选择器的问题是它们不属于DOM;你将无法直接改变它们。

变量nth-child（n）与之前和之后

1 个答案: