Перенаправление на часть того же html-документа

Question

У меня проблема с моим телефоном. У меня есть панель навигации с четырьмя заголовками, и для каждого заголовка я показываю часть того же html-документа. В последнем заголовке у меня есть buttom, который сохранит данные, добавленные в четырех названиях, но у меня есть некоторые обязательные поля во втором заголовке, и я хочу показать предупреждение, когда пользователь пытается нажать кнопку buttom для сохранения данных и этих полей пусты. Я хочу показать предупреждающее сообщение, когда это произойдет, и после того, как я хочу автоматически перенаправить на второй заголовок панели навигации (что он является частью одного и того же html-документа), где пользователи должны заполнить необходимые поля. Проблема в том, что я не знаю, как я могу перенаправить на эту форму, потому что я знаю, как перенаправить на другой html-документ с помощью comand "window.location.href ('document.html'); но не работает для перенаправления на часть одного и того же html-документа.

Я поставил здесь некоторые куски моего кода:

Код панели навигатора:

<div data-role="tabs" id="tabs"> 

    <div data-role="navbar"> 
     <ul> 
      <li><a href="#one" data-ajax="false">Title 1</a></li> 
      <li><a href="#two" data-ajax="false">Title 2</a></li> 
      <li><a href="#three" data-ajax="false">Title 3</a></li> 
      <li><a href="#four" data-ajax="false">Title 4</a></li> 
     </ul> 
    </div> 

     <div id="one" class="ui-body-d ui-content"> 
     ... 
    </div> 
      <div id="two" class="ui-body-d ui-content"> 
     ... 
      </div> 
    <div id="three" class="ui-body-d ui-content"> 
     ... 
    </div> 
    <div id="four" class="ui-body-d ui-content"> 
     ... 
    </div> 

И код днище является:

<input type="button" id="btnSave" name="btnSave" data-icon="star" data-theme="a" data- form="ui-btn-up-a" class=" ui-btn ui-btn-a ui-icon-star ui-btn-icon-left ui-shadow ui-corner-all" value="Save and end"/> 

код функция javascript, называемая с buttom:

$("#btnSave").on("click", function(){   
    if($("#fieldHeight").val() == "" || $("#fieldHeight").val() == null){ 
    confirm("You must introduce your height to continue."); 
    window.location.href = 'index.html#two'; 

    }else if($("#fieldWeight").val() == "" || $("#fieldWeight").val() == null){ 
    alert("You must introduce your wheight to continue."); 
    }else if($("#fieldAge").val() == "" || $("#fieldAge").val() == null){ 
    alert("You must introduce your age to continue."); 
    }else if(gend1.Gender == undefined){ 
    alert("You must introduce your gender to continue."); 
    }else{... 
} 
} 

Проблема заключается в том, что я использую "window.location.href = 'index.html # two';" приложение не перенаправляет на второй заголовок, но его нормально, когда я ставлю только «window.location.href = 'index.html»; но в этом случае приложение перенаправляется на первый заголовок. Кроме того, существует очень большая задержка между i push buttom и перенаправлением приложения.

Я надеюсь, что кто-то может мне помочь и рассказать мне, где проблема, или дать мне одно решение. Большое спасибо!!!

Answer 1

Если вы хотите перенаправить на тот же HTML, используйте код ниже

$.mobile.changePage("index.html#two");