[Обновить] код, который я редактировал
Во-первых, простой 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>
Я нашел учебник о «показывать / скрывать» контент, основанный на параметре URL через JavaScript.Но я застрял, когда я изменил часть кода 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"
И изменить переменную url в javascript с
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, чтобы проверить, поймает ли он право или значение или нет.И он возвращает правильное значение (кокс, молоко, чай с пузырьками).
Итак, что пошло не так?Я надеюсь, что кто-нибудь поймет эту проблему и поможет.