由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。