Question

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

这里有两个菜单项，在第一个框中您看到“选择数据和Internet服务”链接，第二个框只有三个元素，就像锚点一样。现在，它们在第一级菜单（数据和Internet服务）的顶部元素旁边对齐。我需要实现的是，当您选择其他选项（例如VoIP和语音服务）时，第二个框会移动到它旁边。因此它根据第一个菜单中的活动链接进行对齐。我很确定这可以通过javascript实现，但我真的很糟糕。

PS：虽然我对JS很擅长使用所有条款，但我会稍后进行研究，只需要代码及其后面的一些解释，所以将来我自己也能做到这一点。

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

Answer 1

首先，您的网页有解决方案，但无法通过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}">
注意：{$item}是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;
}

这应该有用，希望能帮到你。

对齐当前所选菜单项旁边的元素

1 个答案: