javascript - 使用 data-option-value 添加类 - Jquery

Question

我想使用数据选项值添加选定的类。如果我单击“启用 1”，将其重定向到该页面中的其他页面，我想查找哪个 anchor 标记具有相同的数据选项值，那么我必须添加选定的类。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Home page -->
<a href="services/" data-option-value=".tab-1431326167-1-34">Enable 1</a>
<a href="services/" data-option-value=".tab-1431326167-2-16">Enable 2</a>
<a href="services/" data-option-value=".tab-1431326787790-2-7">Enable 3</a>


<!-- Other page -->
<a class="soft-bg-icons" href="#filter" data-option-value=".tab-1431326167-1-34"><span>Active 1 Content</span></a>
<a class="soft-bg-icons" href="#filter" data-option-value=".tab-1431326167-2-16"><span>Active 2 Content</span></a>
<a class="soft-bg-icons" href="#filter" data-option-value=".tab-1431326787790-2-7"><span>Active 3 Content</span></a>

Answer 1

对我来说，你有两种方法:

1. 使用#hashtag
2. 使用查询字符串

发送data-option-value到其他页面。

您可以添加到<a> href data-option-value就像哈希或查询字符串，当您点击它并将其带入其他页面时。

一个简单的例子:

主页

$(function(){
     $("a").on("click",function(e){ //change selector to be more focused on your menu
         e.preventDefault();

         //if u use #hashtag way
         var _url = $(this).attr("href") + "#/class/" + $(this).data("option-value");

         //if u use query string way
         var _url = $(this).attr("href") + "?class=" + $(this).data("option-value");
         location.href = _url;
     });
});

借阅页面

$(function(){
    //if u use #hashtag way
    _mth = location.hash.match(/\/class\/(.*)/);

    //if u use query string way
    var _mth = location.href.match(/[?&]class=([^&]*)/);

    if(_mth) $("#page a[data-option-value='"+_mth[1]+"']").addClass(_mth[1].replace(".",""));
});

提醒删除不遵循方式的代码。

注意

#hashtag 方式生成如下网址:/otherpage.html#/class/.tab-1431326167-1-34

查询字符串方式生成如下网址:/otherpage.html?class=.tab-1431326167-1-34

#hashtag方式需要重定向到不同主页的页面(具有不同的链接)。

;) 尝试