Question

每当用户点击超链接时我都有数据值属性的锚标记我在本地存储中存储数据值我想将活动类添加到与本地存储匹配数据值的超链接。

HTML code，

<div class="flItems"><a class="category_filter" data-value="Fitted bed Sheet " href="http://192.168.1.156/eles/bed-linen/fitted-bed-sheet"> Fitted bed Sheet  </a> </div>
<div class="flItems"><a class="category_filter" data-value="Flat bed sheet " href="http://192.168.1.156/eles/bed-linen/flat-bed-sheet"> Flat bed sheet  </a> </div>
<div class="flItems"><a class="category_filter" data-value="Full bed sheets  " href="http://192.168.1.156/eles/bed-linen/full-bed-sheets"> Full bed sheets   </a> </div>
<div class="flItems"><a class="category_filter" data-value="Twin bed sheet " href="http://192.168.1.156/eles/bed-linen/twin-bed-sheet"> Twin bed sheet  </a> </div>
<div class="flItems"><a class="category_filter" data-value="Twinxl bed sheets  " href="http://192.168.1.156/eles/bed-linen/twinxl-bed-sheets"> Twinxl bed sheets   </a> </div>
<div class="flItems"><a class="category_filter" data-value="Queen bed sheet " href="http://192.168.1.156/eles/bed-linen/queen-bed-sheet"> Queen bed sheet  </a> </div>
<div class="flItems"><a class="category_filter" data-value="King bed sheets " href="http://192.168.1.156/eles/bed-linen/king-bed-sheets"> King bed sheets  </a> </div>
<div class="flItems"><a class="category_filter" data-value="Cal king bed sheets " href="http://192.168.1.156/eles/bed-linen/cal-king-bed-sheets"> Cal king bed sheets  </a> </div>
<div class="flItems"><a class="category_filter" data-value="Duvet covers " href="http://192.168.1.156/eles/bed-linen/duvet-covers"> Duvet covers  </a> </div>
<div class="flItems"><a class="category_filter" data-value="Bed skirts " href="http://192.168.1.156/eles/bed-linen/bed-skirts"> Bed skirts  </a> </div>
<div class="flItems"><a class="category_filter" data-value="Standard Pillow cases " href="http://192.168.1.156/eles/bed-linen/standard-pillow-cases"> Standard Pillow cases  </a> </div>
<div class="flItems"><a class="category_filter" data-value="King Pillow cases " href="http://192.168.1.156/eles/bed-linen/king-pillow-cases"> King Pillow cases  </a> </div>
<div class="flItems"><a class="category_filter" data-value="Pillow shells " href="http://192.168.1.156/eles/bed-linen/pillow-shells"> Pillow shells  </a> </div>

Jquery Code，

$(".categories_fltrs").hover(function(){
    //alert("adhfdba");
        var clickedvalue = localStorage.getItem("clickedLink");
        //alert(clickedvalue);
        if(clickedvalue)
        {
            //alert("fgjdf");
            //$("data-value='" + clickedvalue + "']").addClass("active");
             $('a[data-value = '+clickedvalue+'].category_filter').addClass('active');
        }
});

Answer 1

这样的事情可能有用：

$(".category_filter").hover(function(){
    //alert("adhfdba");
    var clickedvalue = localStorage.getItem("clickedLink");
    //alert(clickedvalue);
    if(clickedvalue && clickedvalue == $(this).attr("data-value"))
    {
        //alert("fgjdf");
        //$("data-value='" + clickedvalue + "']").addClass("active");
        $(this).addClass("active");
    }
});

请确保您也相应删除了有效课程

Answer 2

我说使用$(this)而不是$('a[data-value = '+clickedvalue+'].category_filter')

Answer 3

$(".categories_fltrs").hover(function(){
    //alert("adhfdba");
        var clickedvalue = localStorage.getItem("clickedLink");
        //alert(clickedvalue);
        if(clickedvalue)
        {
            //alert("fgjdf");
            $(".category_filter[data-value='"+clickedvalue+"']").addClass("active");
             // $(this).addClass('active');
        }
});

搞定了！谢谢你的所有投入......

Answer 4

如果要对访问过的链接设置不同的样式，最好使用：visited伪类并避免使用javascript。

如何使用jquery在悬停时添加类

4 个答案: