how to redirect page

Problem

i have 4 images and then i have applied automatic swiping,It's working nice,but now i have added text (skip) on Image when i click on Skip,text is Redirected to another page(text.html)
My Problem is When i Click Skip it's Redirected page(text.html) but page css not applied. But with out click on skip with automatic sliding redirected page(text.html) is fine.

  <div id="container">
      <img src="../images/4 copy.jpg" alt=""/><br/>
      <div class="caption"><font color="white" >fourth Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd<br/> asdasdasd asdadasd asdasdad</font><a href="../html/text.html" style="text-decoration: none">&nbsp;&nbsp;<font color="white"><span class="one">skip</span></font></a>
      </div>
  </div>

when click skip it's redirect to text.html but text.html css not applied total page will changed when call direct text.html it's displayed nice css also applied
can you please tell me how to make css apply to text.html when i click skip. Thanks in Advanced

Text.html

<!DOCTYPE html>
<html>
    <head>

        <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="../css/jquery.mobile-1.4.2.min.css">
            <script src="../js/jquery-1.10.2.min.js"></script>
            <script src="../js/jquery.mobile-1.4.2.min.js"></script>


                <style>
                    .ui-page {
                        background-color: #666 !important;
                    }
                    .ui-content {
                        background: transparent url(http://brandthunder.com/wp/wp-content/uploads/2011/11/Mac_Desktop_Background.jpg);
                        background-size : 100% 100%;
                        color:#FFFFFF;
                        text-shadow:1px 1px 1px #000000;
                    }
                    .ui-btn-icon-right:after {
                        display:none;
                    }
                    #one
                    {
                        padding : 0;
                        margin : 0;
                    }
                    #two
                    {
                        padding : 0;
                        margin : 0;
                    }
                    #four
                    {
                        padding-top :1%;
                        margin : 0;
                    }
                </style>

                <script type='text/javascript'>//<![CDATA[
                    var screen = $.mobile.getScreenHeight();

                    var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();

                    var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();

                    var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

                    var content = screen - header - footer - contentCurrent;

                    $(".ui-content").height(content);


                    });//]]>  

                    </script>


                </head>
                <body>
                    <div data-role="page" data-theme="a" id="p1">
                        <div data-role="header" data-theme="a" data-position="fixed" id="header" style="background:#808080;">
                            <h1>User guide</h1>
                        </div>

                        <div data-role="content"  class="ui-body ui-body-a ui-corner-all" style="background: #666;color:white;font-family:sans-serif">
                            <p id="one">Step 1:</p>
                            <p id="two">Fill in your Details to Get Started </p>
                        </div>
                        <div data-role="content" class="ui-body ui-body-a ui-corner-all" style="background: #666;color:white;font-family:sans-serif">
                            <p id="one">Step 2:</p>
                            <p id="two">Browse the application</p>
                            <p id="four"><font color="green">Save with Lighting</font></p>
                            <p> in your Deatails to Get Started </br>
                            Fill in your Deatails to Get Started </p>
                            <h5><font color="green">Explore light options</font></h5>
                            <p>Fill in your Deatails to Get Started </br>
                            Fill in your Deatails to Get Started </p>

                        </div>



                        <div data-role="footer" data-theme="b" data-position="fixed" id="footer" style="background:#808080;">
                            <ul data-role="listview" >
                                <!-- <li style="text-align:center;">Save with lighting</li> -->
                                <li style="background:#808080;"><a href="" style="text-align:center;background-color: #666;"></h3>good day</h3></a></li>

                            </ul>

                        </div>
                    </div>  


                </body>
                </html>
Problem courtesy of: user3616693

Solution

with jQuery you can define class on which you can perform an on-click event

like

$( ".skipclass" ).on( "click", function() {
  // do something here like
  // window.location.href='the_link_to_go_to.html';
  // or ajax request
});

further info http://api.jquery.com/on/

Solution courtesy of: joviberton

Discussion

This is a common jQuery Mobile misconception.

You need to learn how jQuery Mobile handles pages. Only initial HTML file is fully loaded into the DOM. Every other HTML page is only partially loaded, basically lets say we have 2 HTML files, one is called index.html and second one is called second.html.

When jQuery Mobile app is initialized, framework will load index.html into the DOM. When you go to other page, in our case second.html, only data-role="page" container div is going to be loaded into the DOM, everything else is discarded.

This is because jQuery Mobile used AJAX for page handling. If first file is already inside the DOM, there's no reason in loading HEAD content of other HTML files.

Read more about it here.

In your case just move your <style></style> to a data-role="page" container div.

Basically do this:

<!DOCTYPE html>
<html>
    <head>

        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="stylesheet" href="../css/jquery.mobile-1.4.2.min.css"/>
        <script src="../js/jquery-1.10.2.min.js"></script>
        <script src="../js/jquery.mobile-1.4.2.min.js"></script>        
        <script type='text/javascript'>//<![CDATA[
                    var screen = $.mobile.getScreenHeight();

                    var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();

                    var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();

                    var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

                    var content = screen - header - footer - contentCurrent;

                    $(".ui-content").height(content);


                    });//]]>  

        </script>


    </head>
    <body>
        <div data-role="page" data-theme="a" id="p1">
            <style>
            .ui-page {
                background-color: #666 !important;
            }
            .ui-content {
                background: transparent url(http://brandthunder.com/wp/wp-content/uploads/2011/11/Mac_Desktop_Background.jpg);
                background-size : 100% 100%;
                color:#FFFFFF;
                text-shadow:1px 1px 1px #000000;
            }
            .ui-btn-icon-right:after {
                display:none;
            }
            #one
            {
                padding : 0;
                margin : 0;
            }
            #two
            {
                padding : 0;
                margin : 0;
            }
            #four
            {
                padding-top :1%;
                margin : 0;
            }
            </style>            
            <div data-role="header" data-theme="a" data-position="fixed" id="header" style="background:#808080;">
                <h1>User guide</h1>
            </div>

            <div data-role="content"  class="ui-body ui-body-a ui-corner-all" style="background: #666;color:white;font-family:sans-serif">
                <p id="one">Step 1:</p>
                <p id="two">Fill in your Details to Get Started </p>
            </div>
            <div data-role="content" class="ui-body ui-body-a ui-corner-all" style="background: #666;color:white;font-family:sans-serif">
                <p id="one">Step 2:</p>
                <p id="two">Browse the application</p>
                <p id="four"><font color="green">Save with Lighting</font></p>
                <p> in your Deatails to Get Started <br/>
                    Fill in your Deatails to Get Started </p>
                <h5><font color="green">Explore light options</font></h5>
                <p>Fill in your Deatails to Get Started <br/>
                    Fill in your Deatails to Get Started </p>

            </div>



            <div data-role="footer" data-theme="b" data-position="fixed" id="footer" style="background:#808080;">
                <ul data-role="listview" >
                    <!-- <li style="text-align:center;">Save with lighting</li> -->
                    <li style="background:#808080;"><a href="" style="text-align:center;background-color: #666;"><h3>good day</h3></a></li>

                </ul>

            </div>
        </div>  
    </body>
</html>
Discussion courtesy of: Gajotres

for js try

document.location = url

Discussion courtesy of: HackerManiac

This recipe can be found in it's original form on Stack Over Flow.