How to use javascript control tab page?

Question

I created 2 pages. One is called home.html, which links to products.html. When I test this, I open home.html, and follow the link to products.html. But the javascript in products.html doesn't work (see code below).

This is products.html:

<div data-role="page" id="page1">
    <div data-role="header">
        <h1>
            page1
        </h1>
    </div>
    <div data-role="content">
        Content1</div>
    <div data-id="PersistentFooter" data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#page1" class="ui-btn-active ui-state-persist">One</a></li>
                <li><a href="#page2">Two</a></li>
                <li><a href="#page3">Three</a></li>
            </ul>
        </div>
    </div>
</div><!-- end page1-->

<div data-role="page" id="page2">
    <div data-role="header">
        <h1>
            page2
        </h1>
    </div>
    <div data-role="content">
        Content2</div>
    <div data-id="PersistentFooter" data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#page1">One</a></li>
                <li><a href="#page2" class="ui-btn-active ui-state-persist">Two</a></li>
                <li><a href="#page3">Three</a></li>
            </ul>
        </div>
    </div>
</div><!-- end page2-->

<div data-role="page" id="page3">
    <div data-role="header">
        <h1>
            page3
        </h1>
    </div>
    <div data-role="content">
        Content3</div>
    <div data-id="PersistentFooter" data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#page1">One</a></li>
                <li><a href="#page2">Two</a></li>
                <li><a href="#page3" class="ui-btn-active ui-state-persist">Three</a></li>
            </ul>
        </div>
    </div>
</div><!-- end page3-->

A working fiddle is now available at http://jsfiddle.net/JkYSa/, thanks to user ali-carikcioglu.

Can someone explain to me why this isn't working?

I use jquery. Can you help me to create tabs page contronl use javascript? — Bất Kần, Aug 11 '13 at 01:06
http://jsfiddle.net/JkYSa/ is this live demo of your website? — Ali Çarıkçıoğlu, Aug 11 '13 at 01:07
you dont even bother to create a jsfiddle demo for this? I give you -1 for this. — Ali Çarıkçıoğlu, Aug 11 '13 at 01:10
This is home.html:http://jsfiddle.net/pborreli/pJgyu/ and This is products.html :http://jsfiddle.net/pborreli/pJgyu/ — Bất Kần, Aug 11 '13 at 01:19
@BấtKần look into [jquery tabs](http://jqueryui.com/tabs/) — woofmeow, Aug 11 '13 at 01:28
@woofmeow: I knew it, this is used only page include three 3 tabs, but I want to use javscript page one, page one? sorry my English. — Bất Kần, Aug 11 '13 at 01:33
Your JS file should be placed either in _hone.html_ head tag or inside _products.html_ body tag. Closing this question as a duplicate is wrong. — Omar, Aug 12 '13 at 05:20

score 0 · Answer 1 · answered Aug 11 '13 at 05:58

From the looks of things you are using jQuery Mobile in products.html. Since the fiddles you have posted are both pointing to the same thing and there is no proper html/js in there i can only assume the problem you are having is that you have not pointed products.html to the jQuery and jQuery mobile source.

add this to your head

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

http://learn.jquery.com/jquery-mobile/getting-started/ may be a good place to look at learning how to use the framework

How to use javascript control tab page?

1 Answers1