php - 动画布局

Question

我想创建一个布局更改而不是加载新页面的页面。这个想法是让用户点击一个项目，然后重新排列页面上的所有项目。我可以弄清楚如何做到这一点，但我不知道如何为每个页面创建链接。

因此，如果用户单击项目 A 并获得布局，AI 会希望有一个链接。

如果用户单击项目 B 并获得布局 BI 想为此创建一个链接。

有任何想法吗？

Answer 1

您可以更改HTML 正文上的类。这将允许您根据布局使用 CSS 的不同部分。每个链接都可以使用 jQuery 设置类：

// In your javascript (within jQuery ready function)
$('#layoutTwoOne').click(function(event) {
    $('body').removeClass('layoutTwo').addClass('layoutOne');
});
$('#layoutTwoLink').click(function(event) {
    $('body').removeClass('layoutOne').addClass('layoutTwo');
});

在您的 HTML 中：

<a href="#" id="layoutOneLink">Switch to Layout One</a>
<a href="#" id="layoutTwoLink">Switch to Layout Two</a>

在您的 CSS 中：

body.layoutOne {
    background-color: black;
}
body.layoutTwo {
    background-color: white;
}
body.layoutOne div {
    /* Some special css for all divs in layout one */
}

代码可能更受数据驱动。这有点像黑客，但它会做你需要的。:)

Answer 2

如果你使用 jQuery，你基本上可以使用任何你喜欢的元素作为链接/按钮或其他任何东西。

Jquery 允许我们为用户交互触发的事件附加各种事件侦听器 -

• 鼠标点击
• 双喜
• 键盘键向下/向上
• ETC...

这些操作可以附加到 HTML 中的任何元素。它可能是 -

• 一个<a>标签
• 一个<img>标签
• a <td>or<tr>在表结构中
• 通用<div>元素
• ETC...

您甚至可以将单击绑定到您喜欢的任何元素上并让它触发您的changeLayout()功能（或类似的东西）。简单（单次）单击处理程序的语法如下所示 -

$("#elementSelector").on('click',function(){
  // user has clicked the element!
  // do some cool animations and stuff!
});

该函数将为任何具有id等于 的属性的元素触发elementSelector。

符合描述的元素的一些示例 -

• <div id="elementSelector"></div>
• <a href="#" id="elementSelector"></a>
• <td id="elementSelector"></td>