Question

[更新]代码我已编辑

首先，纯HTML：

<ul>
 <li><a href="javascript_accord.php/option/coke/">coke</a></li>
 <li><a href="javascript_accord.php/option/bubble-tea/">buble-tea</a></li>
 <li><a href="javascript_accord.php/option/milk/">milk</a></li>
</ul>

其次，链接页面（javascript_accord.php）包含javascript：

<html>
<head>
   <script type="text/javascript" src="development-bundle/jquery-1.3.2.js"></script>
   <script language="javascript"> 
   $(document).ready(function() {
var option = 'coke';
var url = window.location.pathname.split('/');
option = url[3];
showDiv(option);
});

    function showDiv(option) {
$('.boxes').hide();
$('#' + option).show();

   }
  </script>
</head>

<body>
<div class="boxes" id="coke">Coke is awesome!</div>
    <div class="boxes" id="bubble-tea">Bubble tea is da bomb!</div>
    <div class="boxes" id="milk">Milk is healthy!</div>
    <p>
I change my mind:
<ul>
    <li><a href="javascript:showDiv('coke')">Coke</a></li>
    <li><a href="javascript:showDiv('bubble-tea')">Bubble Tea</a></li>
    <li><a href="javascript:showDiv('milk')">Milk</a></li>
</ul>
   </p>
   <a href="http://localhost/selectaccord.php">Back to main page</a>
  </body>
  </html>

我通过JavaScript找到了一些基于URL参数的“显示/隐藏”内容教程。但是当我改变JavaScript代码的一部分时，我就陷入了困境。

以下是我从本教程中学到的代码。第一页包含一些指向其他页面的链接：

If you had to choose a drink, what would you choose:
<a href="/demo/demo-show-hide-based-on-url.html?option=coke" 
<a href="/demo/demo-show-hide-based-on-url.html?option=bubble-tea"
<a href="/demo/demo-show-hide-based-on-url.html?option=milk

以下是链接页面（/demo/demo-show-hide-based-on-url.html）中包含的代码：

<div class="boxes" id="coke">Coke is awesome!</div>
<div class="boxes" id="bubble-tea">Bubble tea is da bomb!</div>
<div class="boxes" id="milk">Milk is healthy!</div>
<p>
I change my mind:
<ul>
    <li><a href="javascript:showDiv('coke')">Coke</a></li>
    <li><a href="javascript:showDiv('bubble-tea')">Bubble Tea</a></li>
    <li><a href="javascript:showDiv('milk')">Milk</a></li>
</ul>
</p>
<a href="/demo/demo.html">Back to main page</a>

和javascript：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var option = 'coke';
    var url = window.location.href;
    option = url.match(/option=(.*)/)[1];
    showDiv(option);
});
function showDiv(option) {
    $('.boxes').hide();
    $('#' + option).show();
}
</script>

它非常有效，但是当我尝试从

更改链接页面时

href="/demo/demo-show-hide-based-on-url.html?option=coke"

这样的事情：

href="/demo/demo-show-hide-based-on-url.html/option/coke"

并从

更改javascript中的url变量

var url = window.location.href;
option = url.match(/option=(.*)/)[1];

到

var url = window.location.pathname.split('/');
option = url[3];

中的所有内容

<div class="boxes" id="...">

出现。

它应该只选择一个会出现。我试过了

var url = window.location.pathname.split('/');
option = url[3];

在简单的JavaScript中检查它是否会捕获权限或值。它确实返回了正确的价值（可乐，牛奶，泡茶）。

那么，出了什么问题？我希望有人能理解这个问题并提供帮助。

Answer 1

jquery的路径是错误的。你能检查一下jquery库是否正在加载吗？

jquery将从javascript_accord.php / option / coke / development-bundle / jquery-1.3.2.js加载请使库绝对路径。那应该做:)）

Answer 2

我相信window.location会返回页面的完整网址，因此您不只是使用/demo/demo-show-hide-based-on-url.html/option/coke部分。

我只需更改正则表达式，将=替换为/，如下所示：

option = url.match(/option\/(.*)/)[1];

Answer 3

"/demo/demo-show-hide-based-on-url.html/option/coke".split('/')[3]将返回选项而非焦炭

数组中有5个条目，因为在第一个＆＃39; /＆＃39;之前有一个空字符串：＆＃34;＆＃34 ;, ＆＃34;演示＆＃34 ;, ＆＃34;演示显示隐藏基于-ON-url.html＆＃34 ;, ＆＃34;选项＆＃34;和＆＃34;焦炭＆＃34;

如何通过JavaScript基于url参数显示内容？

3 个答案: