0

この問題の解決策を見つけようとしましたが、失敗しました (検索スキルがひどいだけかもしれません)。基本的に、ここにウェブページhttp://www.eboxlab.net/transbeam/our-solutions/data-and-internet-services/があります。

ここには 2 つのメニュー項目があります。最初のボックスには「データとインターネット サービスが選択されています」というリンクが表示され、2 番目のボックスにはアンカーのように動作する 3 つの要素が表示されます。現在、これらは第 1 レベルのメニュー (データとインターネット サービス) の一番上の要素の横に配置されています。私が達成する必要があるのは、別のオプション (たとえば、VoIP と音声サービス) を選択すると、2 番目のボックスがその横に移動することです。したがって、最初のメニューのアクティブなリンクに応じて配置されます。これはjavascriptで実現できると確信していますが、私はそれが本当に苦手です。

PS: 私は JS が苦手ですが、すべての用語を自由に使用できます。コードとその背後にある少しの説明が必要なだけで、後で調査を行います。将来的には、自分でこれを実行できるようになります。

左のボックスの特定の要素が選択されている場合、右のボックスにマージンを設定している可能性があります。

4

1 に答える 1

2

まず、Web ページの解決策がありますが、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 に追加されました */
[テンプレートを使用した Web ページの解決策]
1. テンプレート ファイルで、この行
<div class="box-2">
を次のように変更します
<div class="box-2-{$item}">
。フォーマット。 2. 各ページで、この変数に同じ値を割り当てます。次のようにします 。 3. スタイル ファイル ("transbeam/wp-content/themes/transbeam/style/style.css") で、次の行を追加します。 {$item}Smarty

$smarty->assign('item','item1'); //assign item2, item3 to the other two pages.

#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 に答える