How to show content based on url parameter via JavaScript?

问题

[Update] code I have edited

First, the plain 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>

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>

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

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>

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"

into something like this :

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

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];

And all content in

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

appear.

It supposed to be only selected one will appear. I have tried

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

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.

回答1:

path to jquery is wrong. Can you please check if jquery library is loading?

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 :)

回答2:

I believe that window.location will return the full URL of the page, so you're not just working with the /demo/demo-show-hide-based-on-url.html/option/coke part.

I'd simply change the regular expression instead to replace the = with a /, like so:

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

回答3:

"/demo/demo-show-hide-based-on-url.html/option/coke".split('/')[3] will return option and not coke

there are 5 entries in the array, because there is an empty string before the first '/': "", "demo", "demo-show-hide-based-on-url.html", "option" and "coke"

来源：https://stackoverflow.com/questions/8431425/how-to-show-content-based-on-url-parameter-via-javascript

标签

javascript

jquery

url

parameters