javascript - How to switch to another page in rotary selector in Tizen web app

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);
                }
            }
        }
    }