[英]Single page with multiple states controlled by URL
tried searching around for this, but having a hard time coming up with the right terms for what I'm looking for. 尝试搜索此内容,但是很难找到适合我所要查找的术语。
Basically, I want to be able to display a specific page state (show/hide a div) based on the URL. 基本上,我希望能够基于URL显示特定的页面状态(显示/隐藏div)。
I have a single page that has 3 divs, and there is a group of radio buttons that targets the associated div, adds a show/hide class to its container, and also modifies the URL in the address bar to match the current view. 我有一个包含3个div的页面,并且有一组针对相关div的单选按钮,在其容器中添加了show / hide类,还修改了地址栏中的URL以匹配当前视图。
Example: 例:
The only file that exists is /account/orders/index.php
though. 但是,存在的唯一文件是
/account/orders/index.php
。
My markup for these buttons is like this: 我对这些按钮的标记如下:
<div class="sidebar__group">
<div class="tab__group is--vertical" data-target="#ordersContent">
<label class="tab" value="history">
<input type="radio" name="ordersTabs">
<span><a class="link">Order History</a></span>
</label>
<label class="tab" value="recurring">
<input type="radio" name="ordersTabs">
<span><a class="link">Recurring Orders</a></span>
</label>
<label class="tab" value="feedback">
<input type="radio" name="ordersTabs">
<span><a class="link">Rate Vendors</a></span>
</label>
</div>
</div>
.tab__group
's data-target attribute is the container div that gets the correct show/hide div based on each radio input's value. .tab__group
的data-target属性是容器div,该容器div根据每个无线电输入的值获取正确的显示/隐藏div。 The value is what is appended to the URL. 该值是附加到URL的内容。
Here's the jQuery that controls it: 这是控制它的jQuery:
$('.tab').on('click', function(e){
var targetState = $(this).attr('value');
if (!$(this).children('input').is(':checked')){
var states = $(this).parents('.tab__group').find('.tab').map(function(){
return $(this).attr('value');
}), string = [];
$.each(states, function(index, value){
var state = value;
string.push(state);
});
var classes = string.join(' '),
groupTarget = $(this).closest('.tab__group').data('target');
$(groupTarget).removeClass(classes);
$(groupTarget).addClass(targetState);
e.preventDefault();
$(this).children('input').prop("checked", true);
// Add the appropriate state to the current url
window.history.pushState("string", "Title", targetState);
}
});
What's strange is that when I'm running this locally, it all works fine. 奇怪的是,当我在本地运行时,一切正常。 But when running on a live server, I get a "Not Found" error.
但是在实时服务器上运行时,出现“未找到”错误。 I'm guessing this is because there's nothing actually at the above URLs.
我猜这是因为上面的URL实际上没有任何内容。 Is there a way to force it to go to the main index.php page?
有没有一种方法可以强迫它进入index.php主页?
So the solution was to use mod_rewrite. 因此解决方案是使用mod_rewrite。 Here's an example
htaccess
file: 这是一个
htaccess
文件示例:
RewriteEngine On
RewriteCond %{REQUEST_URI} path/
RewriteRule ^path/to/state$ path/to/ [L]
^path/to/state$
is the URL that will be rewritten path/to/
is what it's rewritten to. ^path/to/state$
是将被重写的URL path/to/
是被重写的URL。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.