12345678910
ページングのページリンクは、多くの場合部分的に省略されます。
現在表示中のページと前後するリンクは、表示したいですね。
CSSでは、直後セレクタはありますが、直前セレクタはCSSでは書けないので、jQueryをちょっとだけ使う必要がありそうです
たたき台のスタイルを書いてみました。
この記事は、CSSページネーションの続きです
jQuery
jQuery(function($) {
$("span[data-target]").click(function () {
$("span[data-target]").removeClass("prev");
var $curr= $(this).focus().prev();
$curr.addClass("prev");
});
$("span[data-target]").focusout(function() {
$("span[data-target]").removeClass("prev");
});
});