タブ切り替え　背景色　初期表示

現在タブが3つある画面を作成しています。
それぞれそのタブを選択した時の色の変更は出来たのですが初期表示（読み込み直後）が上手くいきません。ご教授願います。

<html>
	<head>
		<link rel="stylesheet" href="style.css" type="text/css">
		<title></title>

	</head>

	<script type="text/javascript">
		<!--
			window.onload = function(){
				document.getElementById(`B`).style.display = 'none'; 
				document.getElementById('C').style.display = 'none';
				window.parent.center_info.cols="17%,*,"
				};

				function cngTab(tab) {
				document.getElementById('A').style.display = 'none'; 
				document.getElementById('B').style.display = 'none'; 
				document.getElementById('C').style.display = 'none'; 
				document.getElementById(tab).style.display = 'block'; 
				} 




				var color = 0;
				var index = 0;
				
				function cngColor(obj){
					if(index == 1) {
						color.style.backgroundColor ='#C0C0C0';
					}
					c = document.getElementById("Select");
					c.style.backgroundColor = '#C0C0C0'; 
					obj.style.backgroundColor ='#FFFFBB';
					color = obj;
					index = 1;
				}




				var Line = 0;
				var noLine = 0;
				
				function cngBorder(obj, thisid){
					if(Line == 1) {
						noLine.style.borderBottom ='solid thin';
					}
					b = document.getElementById(thisid);
					b.style.borderBottom = 'solid thin'; 
					obj.style.borderBottom ='solid 0px #000000';
					noLine = obj;
					Line = 1;
				}
				
			// -->
		</script>
<body>
	<div id="Select">
	<p>
		<a href="#top"class="A"id="BorderA" style="cngColor(this);" onclick="cngTab('A');cngColor(this);cngBorder(this,id);" return false;>AAA</a> 

		<a href="#top" class="B"id="BorderB" onclick="cngTab('B');cngColor(this);cngBorder(this,id);" return false;>BBB</a> 

		<a href="#top" class="C"id="BorderC" onclick="cngTab('C');cngColor(this);cngBorder(this,id);" return false;CCC</a>
		</p>

		</div>
　
・・・内容・・・
</body>

</html>

読み込み時「Ａ」のタブを#FFFFBBにしたいです。

行動規範の内容に同意します

回答2件

ベストアンサー

style属性で関数呼び出そうとしているので、やりたいことは以下のようなことでしょうか。
style属性はCSSのパラメータと値を記述する属性なので、関数指定しても実行されません

javascript
1window.onload = function() {
2  ..
3  // 最後に追加
4  var borderA = document.getElementById("BorderA");
5  cngColor(borderA);
6}

投稿2018/01/09 07:16

退会済みユーザー

総合スコア0

sigret

2018/01/09 07:32

おぉ！色が変わりました。ありがとうございます！これと一緒にborderbottomも消したいのですが可能でしょうか・・・？

退会済みユーザー

2018/01/09 07:45

実現したいことをなんとなく汲み取って答えているので回答が難しいですが cngColorのあとに以下も追加するとどうでしょうか。 cngBorder(borderA , borderA.id); 初心者の方でしょうか。形に囚われずまずは試行錯誤がんばってください！

sigret

2018/01/09 07:50

はい、どのつく初心者です・・（苦笑）なるほど！そちらにつけるのですね！ずっと（）の外に書いたりvarをもう一つ書いたりしてました。。。。ありがとうございます！！

行動規範の内容に同意します

これでどこまで動いているのか疑問です。

javascript
1 window.onload = function(){
2    document.getElementById(`B`).style.display = 'none';

まずここがBに対してシングルクオートではないです。
また

html
1<a href="#top" class="C"id="BorderC" onclick="cngTab('C');cngColor(this);cngBorder(this,id);" return false;CCC</a>

ここはですがaタグの最初のカッコが閉じてないです。

そもそもですがgetElementByIdで「A」「B」「C」を指定されていますが
「A」「B」「C」というのはclassになっていてidは「Border」が先頭についています。コードを整理し直したほうがいいかと。

投稿2018/01/09 07:39

sousuke

総合スコア3828

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

タブ切り替え　背景色　初期表示

関連した質問