从 javascript 中的 URL 检索 ID 参数

Retrieving ID parameter from URL in javascript

本文关键字：ID 参数 检索 URL javascript 中的      更新时间：2023-09-26

我正在寻找一些帮助，尝试使用JavaScript从URL中检索ID。我有一个看起来像这样的主菜单系统

<section id="menu">
 <ul id="main">
  <li id="first"><a href="index.html">Home</a></li>
  <li><a href="Tables.html">League Tables</a><span class="darrow">&#9660;</span>
  <ul class="sub1">
    <li><a href="Tables.html?id=DivP">Premier Division</a></li>
    <li><a href="Tables.html?id=Div1">Division 1</a></li>
    <li><a href="Tables.html?id=Div2A">Division 2A</a></li>
    <li><a href="Tables.html?id=Div2B">Division 2B</a></li>
    <li><a href="Tables.html?id=Div2C">Division 2C</a></li>
    <li><a href="Tables.html?id=Div2D">Division 2D</a></li>
  </ul>
  </li>
 <li><a href="Fixtures.html">Fixtures/Results</a></li>                  
 <li><a href="ClubContacts.html">Club Contacts</a></li>
 <li><a href="TalkinBaws.html">Talkin' Baws</a></li>
 <li><a href="ContactUs.html">Contact Us</a></li>
</ul>
</section>

在表格页面中，我已经使用document.ready()运行了一些JavaScript（最后添加的代码），该隐藏了1 - 2D的所有除法，并且仅显示总理。在表格页面上，我添加了第二个菜单列表，该列表使用 ID 和 JavaScript 中的 .hide（）/.show（） 根据用户选择显示和隐藏分区

<ul>
 <li><a href="#" id='showDivP'>Premier Division</a></li>
 <li><a href="#" id='showDiv1'>Division 1</a></li>
 <li><a href="#" id='showDiv2A'>Division 2A</a></li>
 <li><a href="#" id='showDiv2B'>Division 2B</a></li>
 <li><a href="#" id='showDiv2C'>Division 2C</a></li>
 <li><a href="#" id='showDiv2D'>Division 2D</a></li>
</ul>

此列表正在使用 .click() ，但是我遇到的问题是我希望页面根据从主菜单中选择加载所需的分区。

例如，如果用户在主页上并尝试通过主菜单直接转到 Division 2B，而我想知道如何从 URL 中的锚标记中获取 ID （ a href="Tables.html?id=Div2B" ） 以便在加载页面时显示正确的除法。

这是我已经拥有的JavaScript：

$("document").ready(function()
{
$('#DivP').show();
$('#Div1').hide();
$('#Div2A').hide();
$('#Div2B').hide();
$('#Div2C').hide();
$('#Div2D').hide();
$('#showDivP').click(function()
{
    $('#DivP').show();
    $('#Div1').hide();
    $('#Div2A').hide();
    $('#Div2B').hide();
    $('#Div2C').hide();
    $('#Div2D').hide();
});
$('#showDiv1').click(function()
{
    $('#DivP').hide();
    $('#Div1').show();
    $('#Div2A').hide();
    $('#Div2B').hide();
    $('#Div2C').hide();
    $('#Div2D').hide();
});
$('#showDiv2A').click(function()
{
    $('#DivP').hide();
    $('#Div1').hide();
    $('#Div2A').show();
    $('#Div2B').hide();
    $('#Div2C').hide();
    $('#Div2D').hide();
});
$('#showDiv2B').click(function()
{
    $('#DivP').hide();
    $('#Div1').hide();
    $('#Div2A').hide();
    $('#Div2B').show();
    $('#Div2C').hide();
    $('#Div2D').hide();
});
$('#showDiv2C').click(function()
{
    $('#DivP').hide();
    $('#Div1').hide();
    $('#Div2A').hide();
    $('#Div2B').hide();
    $('#Div2C').show();
    $('#Div2D').hide();
});
$('#showDiv2D').click(function()
{
    $('#DivP').hide();
    $('#Div1').hide();
    $('#Div2A').hide();
    $('#Div2B').hide();
    $('#Div2C').hide();
    $('#Div2D').show();
});

});

如果这被视为重复的问题，我深表歉意，但我还没有找到我可以理解和处理的明确答案。

感谢您的任何帮助

要在 jquery 中获取 url 的GET参数，您可以使用以下函数：

在这个博客上找到：这里，还有这个问题：获取网址参数jquery或如何在js中获取查询字符串值。

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;
    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

这就是您在情况下使用此功能的方式，
Tables.html?id=Div2B .

var id = getUrlParameter('id');

要获取单击的锚点的 id 属性...

$('a').on('click', function(){
    var id = $(this).attr('id');
    console.log(id);
});

要从 href 属性中获取 id...

$('a').on('click', function(){
    var href = $(this).attr('href');
    var id = href.split('id=')[1];
    console.log(id);
});
相关文章：