brobiaabinymn
New Member
[Update] code I have editedFirst, the plain HTML :\[code\]<ul> <li><a href="http://stackoverflow.com/questions/8431425/javascript_accord.php/option/coke/">coke</a></li> <li><a href="http://stackoverflow.com/questions/8431425/javascript_accord.php/option/bubble-tea/">buble-tea</a></li> <li><a href="http://stackoverflow.com/questions/8431425/javascript_accord.php/option/milk/">milk</a></li></ul>\[/code\]Second, link page (javascript_accord.php) contain javascript:\[code\]<html><head> <script type="text/javascript" src="http://stackoverflow.com/questions/8431425/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>\[/code\]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: \[code\]If you had to choose a drink, what would you choose:<a href="http://stackoverflow.com/demo/demo-show-hide-based-on-url.html?option=coke" <a href="http://stackoverflow.com/demo/demo-show-hide-based-on-url.html?option=bubble-tea"<a href="http://stackoverflow.com/demo/demo-show-hide-based-on-url.html?option=milk\[/code\]And here is the code contain in linking page (\[code\]/demo/demo-show-hide-based-on-url.html\[/code\]) :\[code\]<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://stackoverflow.com/demo/demo.html">Back to main page</a>\[/code\]And the javascript : \[code\]<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>\[/code\]It works greatly, but when I try to change the link page from\[code\]href="http://stackoverflow.com/demo/demo-show-hide-based-on-url.html?option=coke"\[/code\]into something like this :\[code\]href="http://stackoverflow.com/demo/demo-show-hide-based-on-url.html/option/coke"\[/code\]And change the url variable in javascript from\[code\]var url = window.location.href;option = url.match(/option=(.*)/)[1];\[/code\]to\[code\]var url = window.location.pathname.split('/');option = url[3];\[/code\]And all content in\[code\]<div class="boxes" id="..."> \[/code\]appear.It supposed to be only selected one will appear. I have tried \[code\]var url = window.location.pathname.split('/');option = url[3];\[/code\]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.