jQuery Mobile navbar не будет работать

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Кажется, я не могу заставить виджет панели навигации вообще работать в моем коде. Я создаю свое первое приложение в notepad и пытаюсь учиться по мере сборки, поэтому приношу извинения за любые простые ошибки.

На данный момент он отображается в виде двух таблиц с 2 строками, в первой из которых отображается первая кнопка с пробелом под ней, а во второй — пробел над ней со 2-й кнопкой под ней. Я проверил демонстрационный сайт jQuery для мобильных устройств, чтобы попытаться разобраться в коде, и пришел к замечанию, и поэтому я пришел к вам.

 <div data-role="page" id="pageone">
<div data-role="header" data-id="header" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="#pagetwo" class ="ui-btn-active ui-state-persist">
                <h2>Summoner Information</h2>
                <h3>Statistics amp; Achievements</h3><a/></li>
            <li><a href="#todolist">
                <h2>To-Do List</h2>
                <h3>Application wish list</h3></a></li>
        </ul>
    </div><!--/navbar -->
</div><!--/header -->
<div data-role="main" class="ui-content">
    <p>This is an ongoing test page for my League of Legends Statistical Analysis and Coaching application</p>
    <p>Please enter your summoner name in the text box below.</p>
    <h2>Enter Your Summoner Name</h2>

    <div class="ui-grid-a">
        <div class="ui-block-a"><input type="search" name="SumName" id="SumName"  placeholder="Summoner Name" data-clear-btn="true"></div>
        <div class="ui-block-b"><a href="#pagetwo" id="callSum"  class="ui-btn" >Search</a></div>

    </div>
</div>
<div data-role="footer">
    <h1>Footer Text</h1>

</div>
  

Ответ №1:

У вас синтаксическая ошибка в закрывающем теге привязки. вы использовали like <a/> вместо </a>

Обновите свой код, как показано ниже.

   <li><a href="#pagetwo" class ="ui-btn-active ui-state-persist">
      <h2>Summoner Information</h2>
      <h3>Statistics amp; Achievements</h3></a>   
  </li>