如果使用 jquery/javascript 将 url 设置为特定值，如何隐藏和显示 div？答案

【问题标题】：How to hide and show div if url is set to specific value using jquery/javascript?如果使用 jquery/javascript 将 url 设置为特定值，如何隐藏和显示 div？
【发布时间】：2015-04-03 12:22:23
【问题描述】：

我通过 url 发送一个特定的值，然后我的页面得到刷新。 URL 值是动态的。每当设置 URL 时，我都想显示已经隐藏的 div。

<button  id="show_id"  onclick="location.href='opdcasepaperreport.php?patient_nm='+document.getElementById('patient_id').value;" > View Report </button>

当用户点击 View Report 时，将显示报告 div。我尝试了以下两种编码方法：

$( document ).ready(function()
{
    $("#show_id").click(function()
   {
       $('#main').toggle();

  });

});

和

$(document).ready(function () 
{
   if(window.location.href.indexOf("?patient_nm"))
   {
       //alert("your url contains ");
       //show code;
  }
});

在第一种情况下，由于页面刷新 div 再次可见和不可见。有没有像 php 中这样的解决方案 if(isset(---)){//do this;}

【问题讨论】：

你想在主页或点击后的重定向页面上隐藏/显示div吗？
您正在使用按钮做两件事。使用 jquery 函数使 div 隐藏/显示，并且您还应用了 onclick 将页面重定向到特定 url。是故意的吗？如果您保留此实现，则页面将由于稍后的功能（onclick）而刷新/重定向

标签： javascript php jquery html

【解决方案1】：

更改 location.href 值无论如何都会刷新页面。

为了根据 url 值隐藏/显示 div，您需要：

通过在url参数中搜索获取值。
显示/隐藏 div。

获取网址参数。

您可以使用此脚本来获取 url 参数：

 var getQuery = function () {
  var url_params = {};
  var query = window.location.search.substring(1);
  if (query.length === 0) return false;
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (typeof url_params[pair[0]] === "undefined") {
      url_params[pair[0]] = pair[1];
    } else if (typeof url_params[pair[0]] === "string") {
      var arr = [ url_params[pair[0]], pair[1] ];
      url_params[pair[0]] = arr;
    } else {
      url_params[pair[0]].push(pair[1]);
    }
  } 
 return url_params;
};

它将返回一个对象（键、值）。

显示/隐藏 div

如果你使用jQuery，你可以简单地是.toggle()

$("#your_div_name").toggle();

或者通过使用 .show() / .hide()

所以：

var query = getQuery();
if (query && query.some_param !== undefined) {
    $("#your_div_name").show()
} else {
    $("#your_div_name").hide()
}

但最好不要使用 url 参数来更改视图。

玩得开心。

【讨论】：

【解决方案2】：

这个怎么样：

$("#show_id").click(function(e)
{
  e.preventDefault();//this will prevent page refresh
  $('#main').toggle();
});

【讨论】：

【解决方案3】：

试试下面的代码：

 $( document ).ready(function()
    {
    function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
        return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }

        var hasParam = getParameterByName('patient_nm');
        if(hasParam !== 'undefined') {
         $('#main').toggle();
        }
    });

根据您的代码，单击按钮时元素将被切换，但之后页面会立即刷新。在页面刷新时，元素会再次隐藏，因此您无法查看效果。

根据我上面的代码，当页面刷新/加载时，它将搜索您在 URL 中添加的参数“patient_nm”。如果此参数不为空，它将切换元素。由于此过程发生在页面加载后，您将能够看到结果。

希望这会有所帮助。

【讨论】：