常にNavi要素の一部を表示させたい

###前提・実現したいこと
navのタブのうちの１つを、ページを開いた瞬間から常に選択した状態にしたいのですが、どのようにコードを書いたらいいのでしょうか？
具体的には、"今日"というタブを、初めにページを開いたときに表示させておきたいです。
よろしくお願いします。

###該当のソースコード

HTML
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5    <meta charset="UTF-8">
6    <title>Info</title>
7    <link rel="stylesheet" type="text/css" href="style.css">
8    <script type="text/javascript" src="index.js"></script>
9
10</head>
11<body>
12    <div class="header">
13       
14    </div>
15
16    <div class="main">
17
18   
19                 <div>
20                  <nav class="tab-change">
21                        <a href='#howtosee'>見かた</a>
22                      <a href='#this-week'>一週間</a>
23                       <a href='#today'>今日</a>
24
25
26                    </nav>
27                </div>
28
29
30                    <div id='today' class='content'>
31              <h2 class="title2"><span id="view_today"></span>の情報</h2>
32                         <table border="1" rules="cols" class="days">
33
34                           <tr>
35                            <td>9時</td>
36                            <td>12時</td>
37                            <td>15時</td>
38                            <td>18時</td>
39                            <td>21時</td>
40                         </tr>
41
42                               <td>
43                                   <img src="pic1.png">
44
45                               </td>
46                               <td>
47                                   <img src="pic2.png">
48                               </td>
49                               <td>
50                                   <img src="pic5.png">
51                               </td>
52                               <td>
53                                   <img src="pic3.png">
54                               </td>
55                               <td>
56                                   <img src="pic2.png">
57                               </td>
58                           </tr>
59
60                       </table>
61
62                    </div>
63                 <div id='this-week' class='content'>
64                        <h2 class="title">一週間</h2>
65                         <table  border="1" rules="cols" class="week">
66
67                           <tr>
68                            <td>月</td>
69                            <td>火</td>
70                            <td>水</td>
71                            <td>木</td>
72                            <td>金</td>
73                            <td>土</td>
74                            <td>日</td>
75
76                          </tr>
77                               <td>
78                                   <img src="pic1.png">
79                               </td>
80                               <td>
81                                   <img src="spic3.png">
82                               </td>
83                               <td>
84                                   <img src="pic4.png">
85                               </td>
86                               <td>
87                                   <img src="pic1.png">
88                               </td>
89                               <td>
90                                   <img src="pic1.png">
91                               </td>
92                               <td>
93                                   <img src="pic13.png">
94                               </td>
95                               <td>
96                                   <img src="pic4.png">
97                               </td>
98                        </tr>
99
100                       </table>
101
102                    </div>
103                    <div id='howtosee' class='content'>
104                        <img src="">
105                        <img src="">
106                    </div>
107
108
109          <div class="push"></div>
110
111</div>
112
113<div class="footer">
114       
115    </div>
116</body>
117</html>
118

CSS
1
2
3.tab-change a{
4  border-radius: 7px 7px 0 0;
5  display:inline-block;
6  line-height: 38px;
7  text-align: center;
8  background-color:white ;
9  color: black;
10  margin-left:0px;
11  margin-right:90px;
12  margin-top:90px;
13  font-size:20px;
14  float:right;
15  text-decoration: none;
16  padding: 0 32px;
17}
18
19
20.tab-change a:nth-child(2) { border-top: 6px solid #23c1ea; }
21.tab-change a:nth-child(1) { border-top: 6px solid #23c1ea; }
22.tab-change a:nth-child(3) { border-top: 6px solid #23c1ea; }
23
24
25
26.content {
27  height: 320px;
28  display: none;
29  padding: 0px;
30
31}
32
33.content:target {
34  display: block;
35}
36
37
38 table {
39   border-collapse:collapse;
40   border:1px solid #000;
41  -webkit-border-radius:15px;
42  -moz-border-radius:15px;
43  border-radius:30px;
44  margin-left:60px;
45  background-color: white;
46
47
48}
49

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

回答2件

ベストアンサー

求めているのはこれでいいのでしょうか？

CSS
1/*.content:target {*/
2#today {
3  display: block;
4}

投稿2017/06/27 05:40

x_x

総合スコア13749

miramikan

2017/06/27 06:59

ありがとうございます！！ "今日"を開いたときに表示させることができました！ですが、他のタブをクリックしたときも、ずっと"今日"の内容が表示されてしまうのですが、それを解消するにはどうしたらいいでしょうか？

x_x

2017/06/27 07:10

"常に選択した状態にしたい"とのことだったので、変えられないようにしたのですが……。変えたいのであればcssを変更するのではなく、末尾に#todayを付けたアドレスを開けばいいでしょう

miramikan

2017/06/27 07:24

申し訳ありません汗説明の仕方が間違っていましたm(_ _)m すみません、もう少し具体的に説明していただいてもよろしいでしょうか？理解できなくて申し訳ありません。

x_x

2017/06/27 07:42

このページがindex.htmlなら、index.html#todayを開くということです。 JavaScriptを書いてもいいのなら、こう書いてもいいかもしれませんね。 if (!location.hash) { location.href = location.href + '#today'; }

miramikan

2017/06/27 12:17

ありがとうございます！！無事に表示させることができました！！

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

こんにちわ。
:target擬似クラスに慣れていないので、jQueryを使いました。
御門違いの回答でしたら、すみません。

HTML
1<div>
2    <!-- HTMLのタブの箇所にdata属性を追加しました。 -->
3    <nav class="tab-change">
4        <a href='#today' data-target="today">今日</a>
5        <a href='#this-week' data-target="this-week">一週間</a>
6        <a href='#howtosee' data-target="howtosee">見かた</a>
7    </nav>
8</div>
9<div id='today' class='content'>
10省略
11</div>
12<div id='this-week' class='content'>
13省略
14</div>
15<div id='howtosee' class='content'>
16省略
17</div>
18

css
1/* inline-blockの改行の隙間対策 */
2.tab-change {
3    font-size: 0;
4}
5
6/* inline-blockを使っているのでfloatは削除しました */
7.tab-change a {
8	border-radius: 7px 7px 0 0;
9	display: inline-block;
10	line-height: 38px;
11	text-align: center;
12	background-color: white;
13	color: black;
14	margin-left: 0px;
15	margin-right: 90px;
16	margin-top: 90px;
17	font-size: 20px;
18	text-decoration: none;
19	padding: 0 32px;
20}
21
22.tab-change a:nth-child(2) {
23	border-top: 6px solid #23c1ea;
24}
25
26.tab-change a:nth-child(1) {
27	border-top: 6px solid #23c1ea;
28}
29
30.tab-change a:nth-child(3) {
31	border-top: 6px solid #23c1ea;
32}
33
34/* :target疑似クラスは削除しました */
35.content {
36	height: 320px;
37	padding: 0px;
38}
39
40table {
41	border-collapse: collapse;
42	border: 1px solid #000;
43	-webkit-border-radius: 15px;
44	-moz-border-radius: 15px;
45	border-radius: 30px;
46	margin-left: 60px;
47	background-color: white;
48}

javascript
1$('.content').not('#today').css('display','none');
2$('.tab-change a').on('click', function() {
3    var clickTab = $(this).attr('data-target');    
4    if($('#' + clickTab).css('display') == 'none') {
5        $('#' + clickTab).show().siblings('.content').hide();
6    }
7});