如何在 Tizen web 应用程序的旋转选择器中切换到另一个页面

Question

I'm very new to JavaScript and Tizen Web development. So I'm trying to implement rotary selector. And after choosing one element I want to switch to it's specific page. Now I can select the element but can't switch to another page.

index.html

<div class="ui-page" data-enable-page-scroll="false" id="selector-page">
    <div class="ui-selector" id="selector">
        <div class="ui-item human-icon" data-title="Human"></div>
        <div class="ui-item show-icon" data-title="Show"></div>
        <div class="ui-item human-icon" data-title="Human"></div>
        <div class="ui-item delete-icon" data-title="Delete"></div>
        <script src="selector.js"></script>
    </div>
</div>

selector.js

/* global tau */
(function () {
    var page = document.getElementById("selector-page"),
        selector = document.getElementById("selector"),
        selectorComponent,
        clickBound;

    function onClick(event) {
        var target = event.target;

        if (target.classList.contains("ui-selector-indicator")) {
            return;
        }
    }

    page.addEventListener("pagebeforeshow", function () {
        clickBound = onClick.bind(null);
        selectorComponent = tau.widget.Selector(selector);
        selector.addEventListener("click", clickBound, false);
    });

    page.addEventListener("pagebeforehide", function () {
        selector.removeEventListener("click", clickBound, false);
        selectorComponent.destroy();
    });
}());

UPDATED

I've added this code and it works for me, but I'm not sure that it is the right way to do this.

index.html

<div class="ui-page" data-enable-page-scroll="false" id="selector-page">
    <div class="ui-selector" id="selector">
        <div class="ui-item human-icon" data-title="Human">
            <a href="page2.html" class="next-page"></a>
        </div>
...

selector.js

function onClick(event) {
    var target = event.target;

    if (target.classList.contains("ui-selector-indicator")) {
        tau.changePage(document.getElementsByClassName(target.className)[0].getElementsByClassName("next-page")[0].getAttribute("href"));
        return;
    }
}

Answer 1

If you want to use a link you can do this just by replacing div by a :

<div class="ui-page" data-enable-page-scroll="false" id="selector-page">
    <div class="ui-selector" id="selector">
        <a class="ui-item human-icon" data-title="Human" href="next-page.html"></a>
        <div class="ui-item show-icon" data-title="Show"></div>
    </div>
</div>

But you can do this in other way, eg.:

<div class="ui-page" data-enable-page-scroll="false" id="selector-page">
    <div class="ui-selector" id="selector">
        <div class="ui-item human-icon" data-title="Human" data-href="next-page.html"></div>
        <div class="ui-item show-icon" data-title="Show"></div>
    </div>
</div>

And modify selector.js :

    function onClick(event) {
        var target = event.target,
            activeItem,
            url;

        if (target.classList.contains("ui-selector-indicator")) {
            activeItem = selector.querySelector(".ui-item-active");
            if (activeItem) {
                url = activeItem.getAttribute("data-href");
                if (url) {
                    tau.changePage(url);
                }
            }
        }
    }