これをしないでください。要素IDは、Webページの状態に基づいて変更しないでください。代わりに、などの別の属性を使用してくださいclass="current"
。
私が強くお勧めするjQueryを使用している場合は、次のように実行できます。
$('div.tab a').click(function() {
$('div.tab').removeClass('current');
$(this).closest('div.tab').addClass('current');
return false;
});
このコードを機能させるには、要素に追加する必要がありclass="tab"
ます<div>
。<div>
これは、ページに他の要素がある場合は特に良い考えです。これを行うと、現在のタブに属性が設定されますclass="tab current"
。jQueryはこれを適切に処理する方法を知っています。
また、id
属性の代わりに属性を使用し、ブラウザがクリック可能な要素として表示されるようにタグに属性name
を付けることを検討します。例えば:<a>
href
<div id="tab1" class="tab">
<a href="#">tab 1</a>
</div>
このスクリプトを含める方法の例を次に示します(JQueryjquery.js
がHTMLページと同じディレクトリにファイルとして保存されていると仮定します)。
<!DOCTYPE html>
<html>
<head>
<title>Testing jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$('div.tab a').click(function() {
$('div.tab').removeClass('current');
$(this).closest('div.tab').addClass('current');
return false;
});
});
</script>
</head>
<body>
<div id="tab1" class="tab current">
<a href="#">tab1 link</a>
</div>
<div id="tab2" class="tab">
<a href="#">tab2 link</a>
</div>
<div id="tab3" class="tab">
<a href="#">tab3 link</a>
</div>
<div id="tab4" class="tab">
<a href="#">tab4 link</a>
</div>
</body>
</html>
それについてのいくつかのメモ:
実際には、サイトのJavaScriptを別のファイルに入れて、に含めることをお勧めしますが、<script type="text/javascript" src="filename.js"></script>
私が行ったように「インライン」で含めることは、小さなプロジェクトや単に何かをいじる場合には問題ありません。
はの$(function() { ... });
省略形です$(document).ready(function() { ... });
。これは、ブラウザがHTMLドキュメント構造の読み込みを完了するとすぐに、そのブロック内のコードが実行されることを意味します。たとえば、ブラウザがページの残りの部分のダウンロードを完了する前にJavaScriptを実行したくない場合があります。