Javascript 如何在JQM中为不同的页面创建页眉，并使用页码

我有类似4页的表单，在这4页中有一些多页和弹出窗口

我想做的是在页眉下面添加一个页眉类的东西，它将显示当前页面的编号，突出显示一些内容或箭头指示当前页面

我的网站是基于JQM的，所以我试着做一些我能做的事情

这是一把和它有关的小提琴。有人能帮我设计这个吗

提前谢谢

HTML

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

    </div>
    <!-- /header -->
    <div role="main" class="ui-content">
        <p> <a data-role="button" href="#foo" class="clicko" id="1">Venta</a>
 <a data-role="button" href="#foo" class="clicko" id="2">Aliquilar</a>
 <a data-role="button" href="#foo" class="clicko" id="3">Busca</a>

        </p>
    </div>
</div>
<!-- Start of first page -->
<div data-role="page" id="foo">
    <div data-role="header"> <a class="ui-btn ui-icon-carat-l ui-btn-icon-notext ui-corner-all" data-direction="reverse" href="#page1">Back to page "one"</a>

            <h1 id="pagem"></h1>

    </div>
    <!-- /header -->
    <div role="main nopad " class="ui-content" style="padding-left: 0 !important;padding-right: 0 !important;padding-top: 0 !important; ">
        <div class="tracker ui-btn ui-grid-c center" style="border-top-width: 1px; padding: 0px; margin-bottom: 0px;">
            <div class="ui-block-a"><a class=" center1 ui-shadow ui-btn ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline">Button</a>
                <div class="line" style="margin-left:62%"></div>
            </div>
            <div class="ui-block-b"><a class=" center1 ui-shadow ui-btn ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline">Button</a>
                <div class="line" style="margin-right:62%"></div>
                <div class="line" style="margin-left:62%"></div>
            </div>
            <div class="ui-block-c"><a class="center1 ui-shadow ui-btn ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline">Button</a>
                <div class="line" style="margin-right:62%; top:-21px"></div>
                <div class="line" style="margin-left:62%"></div>
            </div>
            <div class="ui-block-d"><a class="center1 ui-shadow ui-btn ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline">Button</a>
                <div class="line" style="margin-right:62%;top:-21px"></div>
            </div>
        </div>
        <p>I'm Second in the source order so I'm shown as the page.</p>
        <p>View internal page called <a href="#bar">bar</a>

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

    </div>
    <!-- /footer -->
</div>

---

@Vikram所以我知道你想用页码替换箭头图标。您是否尝试了数据图标属性并指定自定义图标

另一种方法是覆盖按钮的CSS属性。将customIcon类添加到具有如下所示属性的锚定标记中

HTML:

<div class="ui-block-b"><a class=" center1 ui-shadow ui-btn ui-corner-all ui-btn-inline customIcon">12</a><div class="line" style="margin-right:62%"></div><div class="line" style="margin-left:62%"></div>
</div>

}

现在，您可以在每个pagebeforeshow中访问此锚定标记，并手动设置页码。

---

希望这有帮助

既然页码是固定的，那么使用每个页面的pagebeforeshow事件，并在事件处理程序中设置特定页面的标题如何？@Vijeth您没有收到我的问题，我想将图标更改为数字。就像圆形圆圈内的页码一样。标题不是问题，我已经在我的网站上实现了。我面临的主要问题是在这些圆形圆圈中添加页码。汉克斯兄弟，这对我很有帮助。现在，我必须使当前页面发光

<div class="ui-block-b"><a class=" center1 ui-shadow ui-btn ui-corner-all ui-btn-inline customIcon">12</a><div class="line" style="margin-right:62%"></div><div class="line" style="margin-left:62%"></div>
</div>

.customIcon{
    border-radius: 1em!important;
    -webkit-border-radius: 1em!important;
    padding: 0;
    width: 1.75em;
    white-space: nowrap!important;
    line-height: 1.8em;