Question

我有以下div：

<div id="nav-aj"  data-options='{"default":'t1","animation": {"duration": 500, "effects": "fade"}}'> </div>

我想根据从URL哈希获得的内容更改默认选项的值。

var hash = location.href.substr(location.href.indexOf('#')+1);
alert(hash);

例如，如果散列是A，则默认值为t1，否则为t2。

网址结构为http://example.com/page#A或可能为http://example.com/page#B

我所坚持的是改变默认值。

Answer 1

试试这个：

function updateDiv(hash) {
    var $div = $('#nav-aj');
    var options = $div.data('options');
    switch (hash) {
        case 'A':
            options['default'] = 't1';
            break;
        case 'B':
            options['default'] = 't2';
            break;
        default:
            option['default'] = 't1';
    }
    $div.attr('data-options', options);
}

$(function () {

    var hash = window.location.hash.split('#')[1]
    updateDiv(hash);

    $(window).on('hashchange', function () {
        updateDiv(window.location.hash.split('#')[1]);
    });

});

另外，请使用此选项，因为数据选项中的引号不正确：

<div id="nav-aj" data-options='{"default":"t1","animation": {"duration": 500, "effects": "fade"}}'></div>

Answer 2

HTML

<!-- added `""` around `t1` -->
<div id="nav-aj"  data-options='{"default":"t1","animation": {"duration": 500, "effects": "fade"}}'> </div>

JS

var url = window.location.href
, hash = url.split("#")[1] === "A" ? "t1" : "t2";
  $("#nav-aj").data("options").default = hash;

＆＃13;

var url = "http://example.com/page#B"
, hash = url.split("#")[1] === "A" ? "t1" : "t2";

  $("#nav-aj").data("options").default = hash;
console.log(hash, $("#nav-aj").data("options").default);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="nav-aj"  data-options='{"default":"t1","animation": {"duration": 500, "effects": "fade"}}'> </div>

＆＃13;

根据URL哈希更改HTML5数据选项

2 个答案: