タブ表示の画面を実現したい

前提・実現したいこと

WordPressでタブ表示の画面を作りたいのですが
調べてみてもイマイチ方法が分かりません、、
実現したい画面のイメージは以下のURLの

http://www.zyonass.com/blog/849

お知らせ、スケジュール、イベントという画面です
使用しているWordPressのバージョンは3.7です

発生している問題・エラーメッセージ

問題はイメージしている様な画面が作成できない事です

該当のソースコード

該当のソースコードは
http://www.zyonass.com/blog/849
を参考にHTML、CSS共に書いてみましたが
実現できませんでした

参考にして書いたコード

以下を本文の部分に書きました

html
1<script type="text/javascript">// <![CDATA[
2jQuery(function( $ ) { $(function() { 	$('.tab-demo').click(function() {var index = $('.tab-demo').index(this);$('.content-demo').css('display','none'); $('.content-demo').eq(index).fadeIn(1000);$('.tab-demo').removeClass('select'); $(this).addClass('select') 	}); $(".tab-demo").hover(function(){$ (this).addClass("hover")},function() {$(this).removeClass("hover")}); }); });
3// ]]></script>
4<div class="tab-w">
5<div class="tab-demo select">タブ1</div>
6<div class="tab-demo">タブ2</div>
7<div class="tab-demo">タブ3</div>
8<div class="tab-demo">タブ4</div>
9</div>
10<div class="waku-demo">
11<div class="content-demo">コンテンツ１</div>
12<div class="content-demo no-demo">コンテンツ２</div>
13<div class="content-demo no-demo">コンテンツ３</div>
14<div class="content-demo no-demo">コンテンツ４</div>
15</div>

以下をCSSの部分に書きました

CSS
1<style type='text/css'>
2.tab-w{overflow:hidden;}
3.tab-demo{
4        width:80px;
5        background:#ccc;
6        float:left;
7        list-style:none;
8        padding:5px 0 3px 0;
9        margin-right:2px;
10        text-align:center;
11        display:block;
12        color:#FFF;
13	border-radius: 12px 12px 0px 0px;
14}
15 
16.tab-demo.hover{
17	background:skyblue;
18        cursor: pointer;
19}
20.select{
21	background:blue;
22	cursor:auto;
23}
24.select.hover{
25	background:blue;
26	cursor:auto;
27}
28.waku-demo{
29        width:80%;
30        border:blue 2px solid;
31        background:#ccffff;
32        padding:10px;
33}
34.content-demo{
35        border: #aaa 1px solid;
36        background: #fff;
37        padding:10px;
38}
39.no-demo {
40	display:none;
41}
42</style>

実際の見た目は

タブ1
タブ2
タブ3
タブ4
コンテンツ１
コンテンツ２
コンテンツ３
コンテンツ４

の様になりました

補足情報（FW/ツールのバージョンなど）

拙い説明で申し訳ありませんが、どなたか
お分かりになる方が居らっしゃいましたら
ご教授願います
可能なのかは分かりませんが可能なら
HTMLだけで実現したいです

以上どうぞ宜しく御願い致します

###　追記ソースコード

Sohayaさんから
投稿 2019/01/17 14:54付で
頂いたコードをWordPressに書いて画面に表示、
その画面のHTMLのソースが以下になります

html
1
2<!-- main -->
3
4<div id="main_content">
5
6
7			<div id="h2group">
8				<h2>タブ3</h2>
9			</div>
10
11	<div id="lead"><div class="box"><div class="tab1"><a href="#tab1">タブ1</a><div id="tab1">タブ1の内容</div></div><div class="tab2"><a href="#tab2">タブ2</a><div id="tab2">タブ2の内容</div></div><div class="tab3"><a href="#tab3">タブ3</a><div id="tab3">タブ3の内容</div></div></div><style>.box, a, div[class^="tab"] div { position: relative; } div[class^="tab"] { position: absolute; } .box, div[class^="tab"] { width: 300px; height: 100px; } a { display: block; width: 100px; height: 30px; text-align: center; line-height: 30px;} div[class^="tab"] div { width: 300px; height: 70px; display: none; } div#tab1 { display: block; } a[href="#tab1"], #tab1 { background: gold; } a[href="#tab2"], #tab2 { background: yellowgreen; } a[href="#tab3"], #tab3 { background: deepskyblue; } .tab1 a { left: 0; z-index: 3; } .tab2 a { left: 100px; z-index: 2; } .tab3 a { left: 200px; z-index: 1; } div[class^="tab"] div:target { display: block; }</style></div>
12
13	</div>
14
15
16	</div>
17<!--============ PageTop =============-->
18
19		<div id="pagetop"><a id="totop" name="totop" href="#"  onclick="backToTop(); return false" onkeypress="backToTop(); return false" >
20

###　追記ソースコード(2019/01/22)

EnhancingCSS.css

css
1
2/* Your style */
3
4h2.test1 {
5  font-size:100%;
6  white-space:nowrap;
7  text-decoration:none;
8}
9
10div.test3 {
11  font-size:180%;
12  white-space:nowrap;
13  font-family:'メイリオ';
14}
15
16div.nowrap{display:inline-block;_display:inline;}
17span.nowrap{display:inline-block;_display:inline;}
18
19tr.h31_2nd_exam.tbody
20{
21text-align: center;
22font-size: 12pt;
23font-family: 'メイリオ';
24width="50";
25height="10";
26}

###　追記ソースコード(2019/01/25)

pagescroll.js

Javascript
1
2//Pagescroll
3
4function backToTop() {
5  var x1 = x2 = x3 = 0;
6  var y1 = y2 = y3 = 0;
7  if (document.documentElement) {
8      x1 = document.documentElement.scrollLeft || 0;
9      y1 = document.documentElement.scrollTop || 0;
10  }
11  if (document.body) {
12      x2 = document.body.scrollLeft || 0;
13      y2 = document.body.scrollTop || 0;
14  }
15  x3 = window.scrollX || 0;
16  y3 = window.scrollY || 0;
17  var x = Math.max(x1, Math.max(x2, x3));
18  var y = Math.max(y1, Math.max(y2, y3));
19  window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));
20  if (x > 0 || y > 0) {
21      window.setTimeout("backToTop()", 25);
22  }
23}
24

dit.

2018/12/17 07:43 編集

「参考にして書いた」コードを提示してください。また、HTMLとCSSを書いたとありますが、http://www.zyonass.com/blog/781にあるのはHTMLとJSです。 jQueryを利用したhttp://www.zyonass.com/blog/849にはCSSの記述もありますが、実際どうなっていますか？

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

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

前提・実現したいこと

発生している問題・エラーメッセージ

該当のソースコード

参考にして書いたコード

補足情報（FW/ツールのバージョンなど）

関連した質問