0

我试图找到解决这个问题的方法，但失败了（也许我的搜索技能太糟糕了）。基本上，这里是网页http://www.eboxlab.net/transbeam/our-solutions/data-and-internet-services/。

这里有两个菜单项，在第一个框中您会看到“选择了数据和 Internet 服务”链接，而第二个框中只有三个元素，其行为类似于锚点。现在，它们与第一级菜单（数据和 Internet 服务）中的顶部元素对齐。我需要实现的是，当您选择另一个选项（例如 VoIP 和语音服务）时，第二个框会移到它旁边。所以它根据第一个菜单中的活动链接对齐。我很确定这可以用 javascript 来实现，但我真的不擅长。

PS：虽然我不擅长 JS 可以随意使用所有的术语，但我稍后会做研究，只需要代码和背后的一点解释，所以我以后可以自己做。

如果选择了左侧的某个元素，则可能会为右侧框设置边距。

4

1 回答 1

2

首先，您的网页有解决方案，但无法通过 JavaScript 完成。

JavaScript 可以按照您的想法做事，但请注意，它只适用于同一页面。这意味着当用户点击某个地方时，仍然停留在同一页面上，JavaScript 可以做很多事情，比如改变 DOM 结构，改变某物的样式，或者做一些动画。但是如果页面被重定向到另一个页面，那就不同了。

[您的网页解决方案]
在“VoIP 和语音服务”项 ( http://www.eboxlab.net/transbeam/our-solutions/voip-and-voice-services/ ) 的页面上，将以下 CSS 添加到您的页面文件： 

#banner .left_box .box-2 {
    margin: -10px 0 0 20px;
}

对于其他项目，将类似于更改margin以调整其位置（垂直位置）：

“云服务”页面 

#banner .left_box .box-2 {
    margin: 30px 0 0 20px;
}

“综合语音和数据服务”页面 

#banner .left_box .box-2 {
    margin: 70px 0 0 20px;
}

“附加数据和语音功能”页面 

#banner .left_box .box-2 {
    margin: 110px 0 0 20px;
}

或者你可以改变“margin-top”，两者都有效。

/* 以下部分添加于 10 月 28 日 15:08, GMT+8 */
[使用模板的网页解决方案]
1. 在模板文件中，将此行更改
<div class="box-2">
为
<div class="box-2-{$item}">
Note: {$item}is variable format of Smarty，您可以将其更改为您自己的模板格式。
2. 在每个页面中，为该变量分配一个相同的值，您将执行以下操作：
$smarty->assign('item','item1'); //assign item2, item3 to the other two pages.
3. 在样式文件 ("transbeam/wp-content/themes/transbeam/style/style.css") 中，添加以下行： 

#banner .left_box .box-2-item1 {  
    background:url(../images/sep_1.png) no-repeat left;  
    float:left;  
    height:163px;  
    margin:-50px 0 0 15px;
} 

#banner .left_box .box-2-item2 {  
    background:url(../images/sep_1.png) no-repeat left;  
    float:left;  
    height:163px;  
    margin:-10px 0 0 15px;
}  

#banner .left_box .box-2-item3 {  
    background:url(../images/sep_1.png) no-repeat left;  
    float:left;  
    height:163px;  
    margin:30px 0 0 15px;
}

这应该工作，希望帮助你。

于 2012-10-26T10:01:50.137 回答