Question

我想使用HTML将一个页面跳转到另一个页面。我有2页。在第一页中，我有一个文本框。如果我在textbox中输入任何值，我想跳到第二页。这里windows.location.href功能不起作用。我使用以下代码，

$(document).on('change', 'input', function(){    
    var options = $('datalist')[0].options;     
    for (var i=0;i<options.length;i++){
       if (options[i].value == $(this).val()) 
         {alert($(this).val());  
         window.scrollTo(1,2);
         }
    }
});

<input type="text" id="default" list="languages" placeholder="Group Name">
  
  <datalist id="languages">
  <option value="ADMIN GROUP">
    <option value="INSPECTION GROUP">
    <option value="MANAGER GROUP">
    <option value="USER GROUP">
    <option value="GROUP 1">
    <option value="GROUP 2">
    <option value="GROUP 3">
    <option value="GROUP 4">
    <option value="GROUP 5">
    <option value="GROUP 6">
  </datalist>

这里我使用windows.scrollTo()函数将一个页面跳转到另一个页面。但它没有用。请帮帮我如何使用HTML将“page1”跳转到“page2”。

Answer 1

为第1页和第2页的屏幕设置ID

$(document).on('change', 'input', function(){    
    var options = $('datalist')[0].options;     
    for (var i=0;i<options.length;i++){
       if (options[i].value == $(this).val()) 
         {alert($(this).val());  
         $("html, body").animate({ scrollTop: $('#page2').offset().top }, "slow");
         }
    }
});

Answer 2

如果有外部网站，您必须添加位置。您也可以在同一页面上添加锚点。

$(document).ready(function() {
        $("#languages").change(function() {
            location = $("#languages option:selected").val();
            location.href = location;
        });
    });

<form>
  
  <select id="languages">
 
    <option value="/site1.html">site 1</option>
    <option value="/site2.html">site 2</option>
    
  </select>
</form>

Answer 3

CSS a.hiddenLink {visibility：hidden;显示：无;}

在Page1.html

中编写一个函数来处理文本框的onblur，并有下面的代码行的document.getElementById（＆＃34; page2Link＆＃34）。单击（）;

使用href =＆＃34; page2.html＆＃34;添加锚标记ID =＆＃34; page2Link＆＃34;类=＆＃34; hiddenLink＆＃34;

在Page2.html

中

使用href =＆＃34; page1.html＆＃34;添加一个锚标记。类=＆＃34; hiddenLink＆＃34;

如何使用HTML和JQUERY将一个页面跳转到另一个页面

3 个答案: