首先我们来看下页面上需要实现的基本效果，如下图所示：
因此我们可以使用如下js代码来试试看，是否能使用js改变伪类？如下代码所示：
$(function() { $('.listnav li').click(function(){ var index = $(this).index(); var offset = 11; // 左侧偏移 11像素 var imgWidth = 240; // 图片的宽度是240 var pos = 0; // 因此第一个tab项的居中位置就是 240/2 + 11 if (index === 0) { pos = imgWidth / 2 + offset + 'px'; } else { /* 如果不是第一个tab项的话，那么计算方式就变为如下: pos = imgWidth / 2 + offset + imgWidth * index + 33 * index */ pos = imgWidth / 2 + offset + imgWidth * index + 33 * index; } console.log(pos); $(".tab-content:before, .tab-content:after").css({ "left": pos }); }); });
如上代码并不生效，因此可以断定使用 jquery这样单纯的改变伪类样式是行不通的。 如上有一个定位的计算方式，如上代码，下面我们来简单的分析下，为什么可以这样计算，请看如下图所示：
第一个tab项的时候，小三角形的定位如下：
点击第二个tab项的时候，小三角形的定位如下图所示：
点击第三个tab项的时候，小三角形的定位变为如下图所示：
既然使用如上方式行不通，我们肯定需要查找资料了，正好看到有一篇文章 能解决改变css伪类样式, 请点击查看
因此我这边来详细总结一下，如何做？那么这边肯定需要分二种情况，第一种是使用css内联style样式写的css，第二种是外链的css，也就是html和css分离的那种，因为做项目的时候，分离css还是很有必要的。
一：JS动态改变style内联css写的伪类样式
如下代码：
$(function() { $('.listnav li').click(function(){ var index = $(this).index(); var offset = 11; // 左侧偏移 11像素 var imgWidth = 240; // 图片的宽度是240 var pos = 0; // 因此第一个tab项的居中位置就是 240/2 + 11 if (index === 0) { pos = imgWidth / 2 + offset + 'px'; } else { /* 如果不是第一个tab项的话，那么计算方式就变为如下: pos = imgWidth / 2 + offset + imgWidth * index + 33 * index */ pos = imgWidth / 2 + offset + imgWidth * index + 33 * index; } var styleSheetObject = document.getElementById('colorFlipFlop'); console.log(pos); changeStyle(styleSheetObject, 'left', pos); }); }); /* * @param styleSheetObject style标签的id * @param attr 需要改变的style属性 * @param pos 需要改变的值 */function changeStyle(styleSheetObject, attr, pos) { var beforeIndex = 7; // 定位到style标签中的第几行 console.log(styleSheetObjec
