由URL控制的具有多个状态的单页

Question

尝试搜索此内容，但是很难找到适合我所要查找的术语。

基本上，我希望能够基于URL显示特定的页面状态（显示/隐藏div）。

我有一个包含3个div的页面，并且有一组针对相关div的单选按钮，在其容器中添加了show / hide类，还修改了地址栏中的URL以匹配当前视图。

例：

• 本地主机：8888 /帐户/订单/历史记录
• 本地主机：8888 /帐户/订单/重复
• 本地主机：8888 /帐户/订单/反馈

但是，存在的唯一文件是/account/orders/index.php 。

我对这些按钮的标记如下：

<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的data-target属性是容器div，该容器div根据每个无线电输入的值获取正确的显示/隐藏div。 该值是附加到URL的内容。

这是控制它的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);
  }
});

奇怪的是，当我在本地运行时，一切正常。 但是在实时服务器上运行时，出现“未找到”错误。 我猜这是因为上面的URL实际上没有任何内容。 有没有一种方法可以强迫它进入index.php主页？

Answer 1

因此解决方案是使用mod_rewrite。 这是一个htaccess文件示例：

RewriteEngine On
RewriteCond %{REQUEST_URI} path/
RewriteRule ^path/to/state$ path/to/ [L]

^path/to/state$是将被重写的URL path/to/是被重写的URL。