JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<div data-role="page" id="home">
    <div data-role="header">
        	<h1>home page</h1>

    </div>
    <!-- /header -->
    <div data-role="content">
        	<h3>Home page</h3>
 <a data-role="button" href="#products">Products</a>
 <a data-role="button" href="#others">Others page</a>

    </div>
    <!-- /content -->
    <div data-role="footer">
        	<h4>Page Footer</h4>

    </div>
    <!-- /footer -->
</div>
<!-- /page -->
<div data-role="page" id="products">
    <div data-role="header">
        	<h1>Products</h1>

    </div>
    <!-- /header -->
    <div data-role="content">
        	<h3>Products</h3>

        <ul data-role="listview" data-inset="true">
            <li><a href="#details">Acura</a>

            </li>
            <li><a href="#details">Audi</a>

            </li>
            <li><a href="#details">BMW</a>

            </li>
            <li><a href="#details">Cadillac</a>

            </li>
            <li><a href="#details">Ferrari</a>

            </li>
        </ul> <a data-role="button" href="#others">Other page</a>

    </div>
    <!-- /content -->
    <div data-role="footer">
        	<h4>Page Footer</h4>

    </div>
    <!-- /footer -->
</div>
<!-- /page -->
<div data-role="page" id="details">
    <div data-role="header"> <a data-role="button" data-rel="back" data-icon="arrow-l" data-iconpos="notext" class="backbtn">back</a>

        	<h1>Details</h1>

    </div>
    <!-- /header -->
    <div data-role="content">
        	<h3>Details</h3>

    </div>
    <!-- /content -->
    <div data-role="footer">
        	<h4>Page Footer</h4>

    </div>
    <!-- /footer -->
</div>
<!-- /page -->
<div data-role="page" id="others">
    <div data-role="header">
        	<h1>others page</h1>

    </div>
    <!-- /header -->
    <div data-role="content">
        	<h3>others page</h3>
 <a data-role="button" href="#home">Home page</a>
 <a data-role="button" href="#products">Products</a>

    </div>
    <!-- /content -->
    <div data-role="footer">
  ...

JavaScript

var viewed = false;
$(document).on('click', '.backbtn', function () {
    viewed = true;
});
$(document).on('pagebeforeshow', '#products', function () {
    if (viewed) {
        alert('page has been viewed');
        viewed = false;
    } else {
        alert('first visit!');
    }
});