タブ型メニューで同画面にて画面遷移する方法について

最近、JavaScriptを勉強し始め、Monacaの『Onsen UI v2 + JavaScript Tabbar』で
Webアプリの作成にチャレンジしようとしています。

アプリはCSVデータを読み込みグループ毎にリスト形式で表示したのちに、各リスト項目から詳細ページのHTMLを開こうとしています。
（リスト形式への出力はJavaScriptを使ってます）

タブの切替はうまくいったのですが、各リスト項目から詳細ページのHTMLに画面遷移する際、タブを固定させたまま画面遷移させたいのですがうまくできません。

どなたかご教授いただけないでしょうか
よろしくおねがいいたします。

HTML
1#index.html
2
3<!DOCTYPE HTML>
4<html>
5<head>
6  <meta charset="utf-8">
7  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
8  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
9  <script src="components/loader.js"></script>
10  <script src="lib/onsenui/js/onsenui.min.js"></script>
11
12  <link rel="stylesheet" href="components/loader.css">
13  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
14  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
15  <link rel="stylesheet" href="css/style.css">
16  <script src="js/a1.js"></script>
17  <script>
18    ons.ready(function() {
19      console.log("Onsen UI is ready!");
20    });
21
22    document.addEventListener('show', function(event) {
23      var page = event.target;
24      var titleElement = document.querySelector('#toolbar-title');
25
26      if (page.matches('#MENU1')) {
27        titleElement.innerHTML = 'MENU1';
28      } else if (page.matches('#MENU2')) {
29        titleElement.innerHTML = 'MENU2';
30      } else if (page.matches('#MENU3')) {
31        titleElement.innerHTML = 'MENU3';
32      } else if (page.matches('#MENU4')) {
33        titleElement.innerHTML = 'MENU4';
34      }
35    });
36
37  </script>
38</head>
39<body>
40  <ons-page>
41    <ons-toolbar>
42      <div class="center" id="toolbar-title"></div>
43    </ons-toolbar>
44    <ons-tabbar position="auto">
45      <ons-tab page="MENU1.html">
46      <img src="IMG/MENU1.png" >
47      </ons-tab>
48      <ons-tab page="MENU2.html">
49      <img src="IMG/MENU2.png">
50      </ons-tab>
51      <ons-tab page="MENU3.html" active>
52      <img src="IMG/MENU3.png">
53      </ons-tab>
54      <ons-tab page="MENU4.html">
55      <img src="IMG/MENU4.png">
56      </ons-tab>
57    </ons-tabbar>
58  </ons-page>
59
60<!-- MENU1 -->
61  <ons-template id="MENU1.html">
62    <ons-page id="MENU1">
63    <div id="k_list">
64    <ul class="klist">
65    <div id="titlek"></div>
66    </ul>
67    </div>
68    </ons-page>
69  </ons-template>
70
71<!-- MENU2 -->
72  <ons-template id="MENU2.html">
73    <ons-page id="MENU2">
74      <div class="Menu2"></div>
75    </ons-page>
76  </ons-template>
77  
78<!-- MENU3 -->
79  <ons-template id="MENU3.html">
80    <ons-page id="MENU3">
81      <div class="Menu3"></div>
82    </ons-page>
83  </ons-template>
84  
85<!-- MENU4 -->
86  <ons-template id="MENU4.html">
87    <ons-page id="MENU4">
88      <div class="Menu4"></div>
89    </ons-page>
90  </ons-template>
91  
92</body>
93</html>
94

Javascript
1# a1.js
2// This is a JavaScript file
3//--------------------------------------------------------------------------------------------------------------------
4// 一覧表示
5//--------------------------------------------------------------------------------------------------------------------
6window.onpageshow =function onLoad() {
7              getCSVFile_k();
8}
9
10//--------------------------------------------------------------------------------------------------------------------
11// 
12//--------------------------------------------------------------------------------------------------------------------
13function getCSVFile_k() {
14    var xhr = new XMLHttpRequest();
15    xhr.onload = function() {
16    createArray_k(xhr.responseText);
17    };
18    xhr.open("get", "DT/DT_KANZO_K.csv", true);
19    xhr.send(null);
20}
21
22//--------------------------------------------------------------------------------------------------------------------
23// 一覧作成[K]
24//-------------------------------------------------------------------------------------------------------------------- 
25function createArray_k(csvData) {
26    var csvArrayk = [];
27    var tempArrayk = csvData.split("\n");
28    for(var i = 0; i<tempArrayk.length;++i){
29    csvArrayk[i] = tempArrayk[i].split(',');
30    };
31    var dtk = [];
32    var y = "";
33    var dd = 0;
34
35    for (var i=1; i<tempArrayk.length;++i){ 
36      if (y == "'"+ csvArrayk[i][1]+"'") {
37          continue;}
38        else { y = "'"+ csvArrayk[i][1]+"'";
39          if(csvArrayk[i][16]>0){
40             dd += 1
41             dtk.push("<a href='kd001.html?" +  y.slice(1,4) + "' id='ot" + dd + "  target='_self' onclick= OnLinkClick("+ dd + ");>" + 
42                      "<li class='li_k'>" +  y.slice(4,-1) + "  <span id='r" + dd + "'><span  id='yr" + dd + "'></span></li></a>");
43             document.getElementById("titlek").innerHTML = dtk.join('');
44          }
45        }
46    }
47}

spookybird

2018/08/16 12:59

少なくとも画面遷移させたいと言っている部分のコードを提示していただかないと、何がやりたいのか全然伝わりません。

arot

2018/08/16 14:44

JavaScriptの"createArray_k"作成した一覧からkd001.htmlにリンクしています。一覧をクリックしたら、kd001.html?xxxのページにタブはそのままにして画面遷移させたいです。

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

回答1件

ベストアンサー

こういうことかしら

※タブ部分は画像ないので変えてます
※CSVデータがどんなのなのか不明なので適当にリンク先作ってます

index.html

html
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/onsenui/js/onsenui.min.js"></script>
9
10  <link rel="stylesheet" href="components/loader.css">
11  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
12  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
13  <link rel="stylesheet" href="css/style.css">
14  <script src="js/a1.js"></script>
15  <script>
16    ons.ready(function() {
17      console.log("Onsen UI is ready!");
18    });
19
20    document.addEventListener('show', function(event) {
21      var page = event.target;
22      var titleElement = document.querySelector('#toolbar-title');
23
24      if (page.matches('#MENU1')) {
25        titleElement.innerHTML = 'MENU1';
26      } else if (page.matches('#MENU2')) {
27        titleElement.innerHTML = 'MENU2';
28      } else if (page.matches('#MENU3')) {
29        titleElement.innerHTML = 'MENU3';
30      } else if (page.matches('#MENU4')) {
31        titleElement.innerHTML = 'MENU4';
32      }
33    });
34
35  </script>
36</head>
37<body>
38  <ons-page>
39    <ons-toolbar>
40      <div class="center" id="toolbar-title"></div>
41    </ons-toolbar>
42    <ons-tabbar position="auto">
43      <ons-tab page="MENU1.html" active>
44        <ons-icon icon="ion-home"></ons-icon>
45      </ons-tab>
46      <ons-tab page="MENU2.html">
47        <ons-icon icon="ion-home"></ons-icon>
48      </ons-tab>
49      <ons-tab page="MENU3.html">
50        <ons-icon icon="ion-home"></ons-icon>
51      </ons-tab>
52      <ons-tab page="MENU4.html">
53        <ons-icon icon="ion-home"></ons-icon>
54      </ons-tab>
55    </ons-tabbar>
56  </ons-page>
57
58  <ons-template id="page1.html">
59    <ons-page id="PAGE1">
60    <div id="k_list">
61    <ul class="klist">
62    <div id="titlek"></div>
63    </ul>
64    </div>
65    </ons-page>
66  </ons-template>
67
68<!-- MENU1 -->
69  <ons-template id="MENU1.html">
70    <ons-page id="MENU1">
71      <ons-navigator id="navigator" page="page1.html">
72      </ons-navigator>       
73    </ons-page>
74  </ons-template>
75
76<!-- MENU2 -->
77  <ons-template id="MENU2.html">
78    <ons-page id="MENU2">
79      <div class="Menu2"></div>
80    </ons-page>
81  </ons-template>
82
83<!-- MENU3 -->
84  <ons-template id="MENU3.html">
85    <ons-page id="MENU3">
86      <div class="Menu3"></div>
87    </ons-page>
88  </ons-template>
89
90<!-- MENU4 -->
91  <ons-template id="MENU4.html">
92    <ons-page id="MENU4">
93      <div class="Menu4"></div>
94    </ons-page>
95  </ons-template>
96
97</body>
98</html>

a1.js

JavaScript
1// This is a JavaScript file
2//--------------------------------------------------------------------------------------------------------------------
3// 一覧表示
4//--------------------------------------------------------------------------------------------------------------------
5window.onpageshow =function onLoad() {
6              getCSVFile_k();
7}
8
9//--------------------------------------------------------------------------------------------------------------------
10// 
11//--------------------------------------------------------------------------------------------------------------------
12function getCSVFile_k() {
13    var xhr = new XMLHttpRequest();
14    xhr.onload = function() {
15    createArray_k(xhr.responseText);
16    };
17    xhr.open("get", "DT/DT_KANZO_K.csv", true);
18    xhr.send(null);
19}
20
21function clickEvent(_href) {
22console.log(_href);
23document.querySelector("#navigator").pushPage(_href);
24}
25
26//--------------------------------------------------------------------------------------------------------------------
27// 一覧作成[K]
28//-------------------------------------------------------------------------------------------------------------------- 
29function createArray_k(csvData) {
30    var csvArrayk = [];
31    var tempArrayk = csvData.split("\n");
32    for(var i = 0; i<tempArrayk.length;++i){
33    csvArrayk[i] = tempArrayk[i].split(',');
34    };
35    var dtk = [];
36    var y = "";
37    var dd = 0;
38
39    for (var i=1; i<tempArrayk.length;++i){ 
40      if (y == "'"+ csvArrayk[i][1]+"'") {
41          continue;
42      }
43        else {
44          y = "'"+ csvArrayk[i][1]+"'";
45          if(csvArrayk[i][16]>0){
46             dd += 1
47             /*
48             dtk.push("<a href='kd001.html?" +  y.slice(1,4) + "' id='ot" + dd + "  target='_self' onclick= OnLinkClick("+ dd + ");>" + 
49                      "<li class='li_k'>" +  y.slice(4,-1) + "  <span id='r" + dd + "'><span  id='yr" + dd + "'></span></li></a>");
50              */
51              var _href="kd001.html?1";
52             dtk.push("<a href='#' id='ot" + dd + "'" + ' onclick="clickEvent(\'' + _href + '\');">' + 
53                      "<li class='li_k'>" +  y.slice(4,-1) + "  <span id='r" + dd + "'><span  id='yr" + dd + "'>aaa</span></li></a>");
54
55             document.getElementById("titlek").innerHTML = dtk.join('');
56          }
57        }
58    }
59}

kd001.html

html
1<ons-page id="page3-page">
2  <ons-toolbar>
3    <div class="left"><ons-back-button>Page 2</ons-back-button></div>
4    <div class="center"></div>
5  </ons-toolbar>
6</ons-page>

投稿2018/08/17 05:17

編集2018/08/18 02:22

rururu3

総合スコア5545

arot

2018/08/18 01:04 編集

rururu3さまご回答ありがとうございます。リンク元のリスト項目をJavaScriptで作成しているため、JavaScriptの中におしえていただいたソースを埋め込んでみたのですが、うまくいきません。 HTMLをJavaScriptで構築するのは無謀なのでしょうか?

rururu3

2018/08/18 02:18

回答編集します

arot

2018/08/19 21:31

rururu3さまご回答ありがとうございます。 JavaScript、HTMLに教えていただいたソースを埋め込んでみたのですが、 td001.htmlに画面遷移がされません。そのままコピーしてもダメでした…。 Monacaデバック等でエラー等は検出されておりません。何度もお手数おかけして申し訳ありませんが、もう少し教えていただいてもいいでしょうかよろしくお願いいたします

rururu3

2018/08/20 08:09

私の環境では動いてるんですけど・・・・なんだろう・・・ Chromeで試してるのでそれ以外だとだめなのかな

arot

2018/08/20 20:59

rururu3さまお返事ありがとうございます。 clickEvent内のログ出力は出てるんですが、画面は変わらない状況です。 iphone、Androidで動作確認してるんですが、対応していないんでしょうか? こちらでも再度検証してみたいと思います

rururu3

2018/08/22 02:20

実機での確認なんですね・・・とりあえずMonacaDebuggerで試しましたがtd001.htmlに画面転移されますね・・・なんだろう

arot

2018/08/22 11:47

rururu3さま何度もありがとうございます。すみません。私が勘違いして、td001.htmlの中身を<Body>-</body>内に組み込んでました。教えていただいたソースだけにしたら画面遷移できました。 td001.htmlのデータもJavaScriptで作成しようとしてたんですが、あとはなんとかやってみます。また、分からなかったら教えていただければと思います。ありがとうございました。

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