3

我想知道当用户单击第一页的链接时，是否可以更改尚未打开的另一个页面。这很难解释，但我将尝试通过下面的示例向您展示我的意思。

实际站点的 html 更复杂，但这里有一个简化的版本：

指数：

<head>
<script type="text/javascript" src="external.js"></script>
</head>

<body>
<div id="container">
    <div class="img">
   <a href="PRODUCTPAGE.html">
   <img src="product.jpg"/> </a>
</div>

<div class="img">
   <a href="PRODUCTPAGE.html">
   <img src="product2.jpg"/></a>        
</div>
</body>

产品页面：

<head>
<script type="text/javascript" src="external.js"></script>
</head>


<body>
<div id="container">

<div id = "product1">
  all of product 1 info and pictures
</div>

<div id = "product2">
  all of product 2 info and pictures
</div>

所以基本上，是否有可能只使用 javascript，没有 php 或任何东西，当单击 product1 图像仅在产品页面上显示 product1 信息时，当单击 product2 时仅在页面上显示产品 2 的信息。我一直在尝试找到类似的东西，但到目前为止还没有，这让我相信我可能做不到，但我想我会问。

我的 javascript 文档中没有太多内容，因为我无法弄清楚，但我一直在尝试让它们的 display = none。如果您知道我的意思，我无法让变量继续到下一页。对不起，我对Javascript只有一个基本的了解。

4

3 回答 3

2

您正在寻找的技术是 DHTML（动态 HTML）和 AJAX（异步 JavaScript 和 XML）的组合。

DHTML：

DHTML 背后的想法是，当用户从服务器请求 HTML 页面时，服务器会响应该页面以及用户执行某些操作（例如单击产品图像）时可能需要的其他数据。

服务器在初始页面加载时返回到 HTML 页面的数据通常默认隐藏。例如，页面的 DOM 已加载，但元素上可能有 style="display:none"。

一旦用户启动某个操作，页面就会使用 JavaScript 来操作页面上可见的元素以及可能隐藏的元素。

考虑以下页面：

<body>
  <div id="page1">
    <div id="container">
        <div class="img">
           <a id="product1" onclick="showProduct1();" href="#">
           <img src="product.jpg"/> </a>
        </div>

        <div class="img">
           <a id="product2" onclick="showProduct2();" href="#">
           <img src="product.jpg"/> </a>
        </div>
    </div>
  </div>

  <div id="page2" style="display:none">
      <div id="product_page_wrapper">
          <a href="#" onclick="backToCategories()">back to Product Categories</a>
          <div id="productDetails">
              <div id="prod1">
                 ...
                 ...
               </div>
               <div id="prod2">
                 ... 
                 ...
               </div>
          </div
       </div>
  </div>
</body>

上面的页面分为两个部分，一个是 id="page1"，另一个是 id="page2"。默认情况下，我们隐藏第 2 页。

当用户点击产品链接时，我们隐藏第 1 页并显示第 2 页：

document.getElementById("page1").setAttribute("style","display:none");
document.getElementById("page2").setAttribute("style","display:block");

此外，根据单击的链接，我们还取消隐藏被单击产品的产品详细信息，并隐藏未单击产品的详细信息。例如，如果点击产品 1，我们会显示产品 1：

document.getElementById("prod2").setAttribute("style","display:none");
document.getElementById("prod1").setAttribute("style","display:block");

最终结果是只显示 page2 div。如果用户单击“返回产品类别”链接，我们会反转该过程，隐藏 page2 并显示 page1。

总之，这种类型的操作可以完全在客户端完成，无需任何 PHP 或服务器端代码，只需使用HTML、JavaScript 和 CSS，正如 @Marcel 所指出的那样。然而，使用纯 DHTML 更多的是一种学术练习，而不是一种实际的解决方案，因为服务器端维护客户数据、产品数据以及专业的、产生收入的产品所需的一切。

阿贾克斯：

另一方面，AJAX 与 DHTML 非常相似，甚至可以被视为 DHTML 的扩展。AJAX 背后的想法是——当用户启动一个动作时——页面从服务器请求数据。当服务器响应时，数据被传递给回调函数，然后使用数据操作页面。

在您的特定示例中，您可能会使用 DHTML 和 AJAX 的组合来实现所需的效果。考虑以下页面，该页面使用 AJAX 为用户选择的产品提取相关 HTML：

<head>
<script type="text/javascript" src="external.js"></script>

<script>

  function makeRequest(url) {
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
      httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
      try {
        httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } 
      catch (e) {
        try {
          httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } 
        catch (e) {}
      }
    }

    if (!httpRequest) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }
    httpRequest.onreadystatechange = displayContents;
    httpRequest.open('GET', url);
    httpRequest.send();
  }

  function displayContents() {
    if (httpRequest.readyState === 4) {
      if (httpRequest.status === 200) {
        //alert(httpRequest.responseText);
        document.getElementById("container").innerHTML = httpRequest.responseText;
    } else {
      alert('There was a problem with the request.');
    }
  }


</script>
</head>

<body>

    <div id="container">
        <div class="img">
           <a id="product1" onclick="makeRequest('/getproduct?id=1')" href="#">
           <img src="product.jpg"/> </a>
        </div>

        <div class="img">
           <a id="product2" href="#" onclick="makeRequest('/getproduct?id=2')">
           <img src="product2.jpg"/></a>        
        </div>
    </div>
</body>

在上面的示例中，当用户单击产品的链接时，服务器会以足够的 HTML 响应来充分替换页面的 div#container 部分：

<span id="product">
    <p>Product Name 1</p>
    <p>Product details...</p>
</span>

这被注入到页面中，以便 DOM 看起来像这样：

<body>

    <div id="container">
        <span id="product">
            <p>Product Name 1</p>
            <p>Product details...</p>
        </span>
    </div>

</body>

概括：

这个问题被标记为 JavaScript，而不是 jQuery，因此答案集中在 JavaScript 上，但 DHTML 部分中描述的技术在许多 JavaScript 库中都有使用。例如，有关您描述的技术的演示，请参阅jQuery Mobile 的多页模板。

于 2012-05-27T01:32:50.153 回答
0

您可以更改链接以添加参数。这样 PRODUCTPAGE.html 就知道您点击了哪个链接。

   <a href="PRODUCTPAGE.html?product1"><img src="product1.jpg"/></a>

   <a href="PRODUCTPAGE.html?product2"><img src="product2.jpg"/></a>

在 PRODUCTPAGE.html 中，您可以使用 JavaScript 解析 URL 并仅显示特定产品的数据。

于 2012-05-27T01:22:09.733 回答
0

是的，您可以通过 javascript 隐藏和显示 DOM 的不同部分。

查看此切换示例，了解您需要做什么。

于 2012-05-27T01:22:50.340 回答