有没有办法用jQuery动态更改导航栏文本

时间:2017-02-24 01:45:45

标签: javascript jquery html css

<div id="page1" data-role="page">
    <div data-role="header" data-position="fixed" align="center"><img src="img/VAWE-long-300x30-transparent.png" width="300" height="30" alt="" /></div>
    <div data-role="content" style="margin:0; padding:0;">
        <div id="wowslider-container1" style="padding-bottom:10px;">
            <div class="ws_images">
                <ul>
                    <li><img src="data1/images/catering_1.png" alt="" title="" id="wows1_0" /></li>
                    <li><img src="data1/images/rev._pamela_a._mann.png" alt="wowslider.com" title="" id="wows1_1" /></li>
                    <li><img src="data1/images/catering.png" alt="" title="" id="wows1_2" /></li>
                </ul>
            </div>
            <div class="ws_shadow"></div>
        </div>
        <script type="text/javascript" src="engine1/wowslider.js"></script>
        <script type="text/javascript" src="engine1/script.js"></script>
        <div style="padding-bottom:5px;">
            <img src="img/Wedding in a Box.png" style="width:100%!important;">
        </div>
        <div style="padding-bottom:5px;">
            <img src="img/Flutter My Shutter.png" style="width:100%!important;">
        </div>
        <div style="padding-bottom:5px;">
            <img src="img/Brock's riverside.png" style="width:100%!important;">
        </div>
    </div>
    <div data-role="footer" data-position="fixed">
        <div data-role="navbar" class="ui-nodisc-icon">
            <ul>
                <li><a href="#" class="ui-icon-home ui-btn-icon-top ui-btn-active">Home</a></li>
                <li><a href="#" class="ui-icon-calendar ui-btn-icon-top">Events</a></li>
                <li><a href="#" class="ui-icon-search ui-btn-icon-top">Vendors</a></li>
                <li><a href="#map" class="ui-icon-location ui-btn-icon-top">Map</a></li>
                <li><a href="#" onClick="loginCheck()" class="ui-icon-user ui-btn-icon-top">Profile</a></li>
            </ul>
        </div>
    </div>
</div>

我想知道是否有办法改变供应商&#34;菜单项如上所示,并在pageinit函数中使用jQuery将文本和图标更改为不同的东西?

1 个答案:

答案 0 :(得分:1)

这将找到一个包含字符串Vendors的元素,替换该字符串。然后,它可以删除图标的类,并将其替换为其他内容。

$("a:contains('Vendors')").text('Different String');
$("a:contains('Vendors')").removeClass('ui-icon-search').addClass('ui-icon-location');