Question

我有一个指向我网站页面的链接列表。我希望链接能够在用户点击它们时更改它们的外观（变为粗体）。我为“主页”链接设置了默认值，因此当用户首次访问网站时，“主页”链接为粗体。问题是，每当点击另一个链接时，我可以看到它非常短暂地变为粗体，但是默认返回到“Home”链接为粗体，因为这是硬编码到网站的默认值。如何更改此设置，以使粗体链接是用户当前所在页面的链接（并不总是默认为“Home”链接为粗体）？非常感谢您的帮助！

这是html：

<table class="sidebar_table">
    <tr class="option">
        <td class="select selected">image</td>
        <td><a href="my_website_link">A Link</a></td>
    </tr>
</table>

这是我正在使用的jquery代码：

$('tr.option').click(function () {
$('tr.option td.select').removeClass('selected');
$(this).find('td.select').addClass('selected');
});

Answer 1

选项1）您可以使用php检测用户所在的页面，并以这种方式编写类。

选项2）如果您不想使用PHP，可以使用文档就绪调用在页面加载时添加该类：

$(document).ready(function(){
    $('.sidebar_table .option .my_website_link').each(function(){
        // logic for adding the class to the page the user is on
        if(XXXXXXXXX){
             $(this).addClass('selected');
        }
    });
});

Answer 2

怎么样......

HTML

<table class="sidebar_table">
    <tr class="option">
        <td class="select page1">image</td>
        <td><a href="my_website_link.html#page1">A Link</a></td>
        <td class="select page2">image</td>
        <td><a href="my_website_anotherlink.html#page2">A Link</a></td>
    </tr>
</table>

脚本

...
var page = window.location.hash;

$('.option').find('a').each(
    function (i, el) {
        if ($(el).hasClass('page')) {
            $(el).addClass('selected');
        }
    };
);
...

...或使用php或本地存储。

编辑：好的，我刚刚意识到这与马戏团的建议非常相似。然后OP说“链接是动态生成的”嗯，大多数页面是动态生成的，对吧？那么如何动态地将一些关键字插入到链接的哈希，td的类和脚本中呢？

由于页面刷新，无法使用jquery永久更改选择器

2 个答案: