如何通过JavaScript基于url参数显示内容？ [英] How to show content based on url parameter via JavaScript?
问题描述
[更新]我编辑的代码
首先，纯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：
Second, link page (javascript_accord.php) contain 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>
我找到了一些关于'show / hide'的教程基于URL参数的内容通过JavaScript。
但是当我更改JavaScript代码的一部分时，我感到困惑。
I found some tutorial about 'show/hide' content based on URL parameter via JavaScript. But I stuck when I change a part of the JavaScript code.
以下是我从本教程中学到的代码。
第一页包含一些指向其他页面的链接：
Here are the code that I learned from the tutorial. First page contain some links to other page:
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 ）：
And here is the code contain in linking page (/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：
And the 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>
它很有用，但当我尝试从
It works greatly, but when I try to change the link page from
href="/demo/demo-show-hide-based-on-url.html?option=coke"
如下所示：
href="/demo/demo-show-hide-based-on-url.html/option/coke"
并在javascript中更改url变量
And change the url variable in javascript from
var url = window.location.href;
option = url.match(/option=(.*)/)[1];
到
var url = window.location.pathname.split('/');
option = url[3];
所有内容
<div class="boxes" id="...">
出现。
它应该是只会选择一个。我试过了
It supposed to be only selected one will appear. I have tried
var url = window.location.pathname.split('/');
option = url[3];
在简单的JavaScript中检查它是否会捕获权利或值。它确实返回了正确的价值（可乐，牛奶，泡茶）。
in simple JavaScript to check whether it will catch the right or value or not. And it does return the right value (coke, milk, bubble-tea).
那么，出了什么问题？
我希望有人理解这个问题和帮助。
So, what went wrong? I hope somebody understand this problem and help.
推荐答案
jquery的路径是错误的。你能检查一下jquery库是否正在加载吗？
path to jquery is wrong. Can you please check if jquery library is loading?
jquery将从javascript_accord.php / option / coke / development-bundle / jquery-1.3.2.js $加载b $ b请创建绝对库的路径。那应该是：）
jquery will be loaded from javascript_accord.php/option/coke/development-bundle/jquery-1.3.2.js Please make the path to library absolute. That should do :)
这篇关于如何通过JavaScript基于url参数显示内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
