0

Web サイトのタブとしてナビゲーション バーを作成し、onlink ID を使用して特定の特性を持つ現在のタブを指定しました。私の問題は、タブを変更するときに、以前のタブ ID を none に設定し、現在のタブ ID を onlink に設定する方法がわからないことです。

ナビゲーションバーコードは次のとおりです。

<div id="indNavBar">
<div id="indHolder">
<ul>
<li><a onclick="DisplayDIV('IndPage');HideDIV('DoubleInd')" id="onlink">Single Indicator</a></li>
<li><a onclick="DisplayDIV('DoubleInd');HideDIV('IndPage');">Double Indicators</a></li>
</ul>
</div>
</div>

簡単な方法がありますが、それはどういうわけかばかげています.現在の各タブをページ全体として作成し、別のタブをクリックすると、指定された onlink id を持つページに移動するクリックされたタブの URL が与えられますが、これにはそのため、より良い解決策を探しています。

4

5 に答える 5

1

thisjavascriptメソッドを渡すことで、クリックされているコントロールを取得できます

onclick="DisplayDIV('IndPage', this);


function DisplayDIV(IndPage, sourceObj)
{
   alert(sourceObj.id);
}
于 2012-07-04T09:52:26.797 に答える
0

HTMLIDを間違った方法で使用しようとしています。

IDは、HTMLタグの一意の識別子です。実行時に変更しないでください。

代わりに、表示したいタブにCSSクラスを適用します。

CSS

.hide {display:none;}

Javascript

var indpage = document.getElementById("IndPage");
if (!indpage.classList.contains("hide")) {
    indpage.classList.add("hide");
}

次に、実行時のHTMLは次のように変更されます。

<div id="IndPage" class="hide">...</div>

これが標準的なアプローチです。
そして、あなたはこのアイデアでもっと多くのことをすることができます。

I agree that making a tab a whole page is not a good idea. You can use javascript to apply CSS classes to hide and remove that class to show again.

Its also a good idea to learn how to separate your javascript from your HTML. Please read some more tutorials on this. One for instance: Unobtrusive Javascript

于 2012-07-04T10:10:50.733 に答える
0

上記の回答からヒントを得て、次のように機能しました。

function putOnlink(x){
document.getElementById('onlink').id = "none";
$(x).attr('id','onlink');
}

タブコードは次のとおりです。

<div id="indNavBar">
<div id="indHolder">
  <ul>
    <li><a onclick="DisplayDIV('IndPage');HideDIV('DoubleInd');putOnlink(this);" id="onlink">Single Indicator</a></li>
    <li><a onclick="DisplayDIV('DoubleInd');HideDIV('IndPage');putOnlink(this);document.getElementById('onlink').id='none'">Double Indicators</a></li>
  </ul>
</div>
</div>

2番目のリンクで最初のリンクのIDを2回変更する必要があったのは、一度も機能しなかったためです。クリックしたときだけでなく、タグにIDが設定されている可能性があります。

于 2012-07-04T10:37:46.837 に答える
0

jQuery ライブラリを使用してもよろしいですか？その場合は、HTML にインライン JavaScript を配置することを避けて、toggleClass http://api.jquery.com/toggleClass/を使用できます。

于 2012-07-04T09:54:32.840 に答える
0

これを行うjqueryの方法は次のとおりです。http://jsfiddle.net/surendraVsingh/HyAhL/

$('#indHolder a').click(function(){

    $(this).attr('id', 'onlink');
     $(this).parent().siblings().find('a').removeAttr('id');
});​
于 2012-07-04T10:11:43.360 に答える