Question

我正在尝试确定如何向某些JavaScript代码添加哈希值，以便当用户使用锚点（例如abc.html/#1）转到页面链接时H1和href有一个已打开的样式（在这种情况下heading_over为H1而menuitem_less为href。

在本地测试时，几乎可以满足我的需求。手风琴打开和关闭下面的内容，标题和链接的样式也会相应改变。然后，当我测试它好像有人想要跳转到那段内容时（例如某人用＃1向URL发送电子邮件），内容按原样打开，链接样式会按原样改变，但H1样式不会。

我在这里粘贴了我的代码：

http://jsfiddle.net/xyRW9/ - 使用HTML和CSS

$(document).ready(function () {
    $("#accordion").accordion({
        active: false,
        collapsible: true,
        autoHeight: false,
        navigation: true,
        header: '.menuitem'
    });
    $(".menuitem").click(function (event) {
        window.location.hash = this.hash;
    });

    // -- CODE TO MAKE LINK & H1 STYLES ACTIVE 
    // -- ON ANCHOR LINK VIA CLICK OR LOAD  --/
    var hash = window.location.hash;
    if (hash) {
        $('a[href="' + hash + '"]').addClass("menuitem_less");
    };
    $("#link1").click(function (event) {
        $("#accordion #heading-1").toggleClass("heading_over");
        $("#accordion #heading-2").removeClass("heading_over");
        $("#link1").toggleClass("menuitem_less");
    });
    $("#link2").click(function (event) {
        $("#accordion #heading-2").toggleClass("heading_over");
        $("#accordion #heading-1").removeClass("heading_over");
        $("#link2").toggleClass("menuitem_less");
    });

    // -- CODE TO MAKE H1 STYLES ACTIVE ON ANCHOR LINK LOAD ONLY  --/
    var hash = window.location.hash;
    if (hash) {
        $('#heading-1').addClass("heading_over");
        $('#heading-2').removeClass("heading_over");
    };
    var hash = window.location.hash;
    if (hash) {
        $('#heading-2').addClass("heading_over");
        $('#heading-1').removeClass("heading_over");
    };

});

但是完全测试它是很棘手的，因为你无法访问地址栏中的＃1和＃2（以模拟如果直接在浏览器中打开链接它将如何工作）。

我对Javascript和jQuery并不熟悉，并且通过使用我在网上找到的代码片段来实现这一目标。

如何在hash标记中向元素添加CSS类

0 个答案: