Question

我对编码很新。我可以在html和css中编码，目前正在学习javascript。我正在建立一个网站，我对目前的结果非常满意，但我无法弄清楚如何使我的网站响应。我正在谈论的页面是....我想创建这个页面，所以如果点击其中一个按钮，新页面将提供关于被点击主题的信息和关于主题的视频。

我的问题是：制作类似内容的最佳方式是什么？

我考虑过让每一页都成为一个单独的.html文件，但我发现我会有数百个关闭的.html文件，应该有一个更有效的方法来制作它。

抱歉我的语法不好，我的英语不太好。

*修改

只是我想要做的一个例子：

http://i61.tinypic.com/j67i2v.jpg

这将是我的主页，如果（在这种情况下）单击de cecco，我希望此页面显示：

http://i60.tinypic.com/2lo0r50.jpg

Answer 1

仅仅为了您自己的启发，术语“响应”通常是指响应屏幕大小变化的网站（例如，使用CSS媒体查询根据用户是否在移动设备上浏览来更改网站外观设备或桌面。）

继续，您的问题有很多解决方案。一种简单的方法（同时避免对服务器的任何其他请求）是创建隐藏元素，当单击链接时，将显示该元素。

请参阅this jsbin示例。

HTML

<button value="#box" id="box-button">Show info</button>

<div id="box">Some info is in this box<button class="x">x</button></div>

CSS

button {
    cursor: pointer;
}

#box {
    display: none;
    position: absolute;
    margin: auto;
    left: 0; right: 0; top: 0; bottom: 0;
    width: 50%; height: 50%;
    padding: 1em;
    box-shadow: 0 0 20px 0 #555;
    border-radius: 10px;
    background: #fff;
}

.x {
    color: red;
    position: absolute;
    top: 0; right: 0;
    padding: 10px;
    border: none;
    background: #fff;
}

的jQuery

$('#box-button').on('click',function() {
   $($(this).attr('value')).css('display','block');
});

$('.x').on('click', function() {
  $(this).parent().css('display','none');
});

这样做的缺点是，根据您拥有的弹出框数量，浏览器必须加载更多DOM元素，否则可能不会使用所有这些元素。

另一种方法是使用AJAX调用，就像你在原始问题中引用的那样（但是，可能有一百个.html文件，就像你说的那样）。

这样做的好处是DOM只包含任何给定时间所需的内容。缺点是您必须向服务器发送请求。

我很难为此制作一个jsbin示例，所以我将为您提供一些显示示例的代码：

HTML

<button id="someButton" value="http://www.yourwebsite/someresource.html">show info</button>
<div id="popup"></div>

CSS

#popup {
    display: none;
    position: absolute; /* etc. */
}

的jQuery

$('#someButton').on('click',function() {
    $('#popup').load($(this).attr('value'));
});

编写响应式页面

1 个答案:

HTML

CSS

的jQuery

HTML

CSS

的jQuery