Question

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

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

如果用户点击项目B并获得布局B，我想为其创建一个链接。

有什么想法吗？

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允许我们为用户交互触发的事件附加各种事件监听器 -

鼠标点击
double cicks
键盘键向下/向上
等...

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

<a>代码
<img>代码
表格结构中的<td>或<tr>
通用<div>元素
等...

您可以将点击甚至绑定到您喜欢的任何元素上，并让它触发您的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>

动画布局

2 个答案: