Q&A
どんなコードになっているのかわからないとアドバイスのしようがありません。htmlとjsの問題となっていそうな部分を提示していただけますか。
非常に大変なことになってしまいました。
助けてください。
何日もかけて作った
ページにaタグでURLを付けても飛びません。
詳細↓
HTMLファイル内でJSを使って動的ページ
(実際にはページでは無く、ボタンを押すとコンテンツが右から左に移動して表示してくれるように設計しました)
を制作しましたが。
ページ内でコンテンツが動いてるだけなので事実上ページではないんです＞＜
そのせいかURLを貼っても
最初に出てくるTopページしか表示されません！
そもそも動的ページの存在を今初めて知りました。
調べると動的URL云々でよくわかりません！
どうすればいいのですが？
また私みたいなケースはJSアンカータグで解決できるのでしょうか…
この記事の、「URLのアンカーで判断する場合」でしょうか？
https://www.tam-tam.co.jp/tipsnote/javascript/post9911.html
コードは提示出来ませんが
HTMLファイルの中に
HTMLで生成されたメニューバー（ナビ）があり
それが「１」、「２」、「３」というボタンがあるとします
待ち受けページは１で
２、３のどちらかをおすと、ページはその場のままの状態でよこから
２、３のページがスライドしてやって来ます。
これらのページはURLではなくjsで構成されており、aタグで構成されていません。
作り終わって初めて外部からアクセスした時に「待ち受け」にしか飛べないことを自覚しました。
たとえば２、３に後からAタグであたいをつけたとします。
しかし外部から２や３に設置したAタグのURLを実行しても、
１，２，３そのもが＝１つのページなので。。。２、３が表に出てこないのです。
2や3を直接表示させる仕組みが必要だということですが、それはjsで解決できます。あとはどのような仕組みでページをスライド表示させているかがわかれば具体的な回答ができるのですが。
こんな感じです、、、
<ul class="nabox">
<div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="1">
<li style="display: inline-block;">
<input type="button" class="nab"
value="1"
id="button1"
onclick="disabled = true;
getElementById('button2').disabled = false;
getElementById('button3').disabled = false;
getElementById('button4').disabled = false;
getElementById('button5').disabled = false;">
</li>
</div>
<div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="0">
<li style="display: inline-block;">
<input type="button" class="nab"
value="2"
id="button2" disabled
onclick="disabled = true;
getElementById('button1').disabled = false;
getElementById('button3').disabled = false;
getElementById('button4').disabled = false;
getElementById('button5').disabled = false;">
</li>
</div>
<div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="2">
<li style="display: inline-block;">
<input type="button" class="nab"
value="3"
id="button3"
onclick="disabled = true;
getElementById('button1').disabled = false;
getElementById('button2').disabled = false;
getElementById('button4').disabled = false;
getElementById('button5').disabled = false;">
</li>
</div>
<div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="3">
<li style="display: inline-block;">
<a id="ssd"></a>
<input type="button" class="nab"
value="4"
id="button4"
onclick="disabled = true;
getElementById('button1').disabled = false;
getElementById('button2').disabled = false;
getElementById('button3').disabled = false;
getElementById('button5').disabled = false;">
</li>
</div>
<div style="float: left;" class="ui-thumbnail" tabindex="-1" data-key="4">
<li style="display: inline-block;">
<input type="button" class="nab"
value="5"
id="button5"
onclick="disabled = true;
getElementById('button1').disabled = false;
getElementById('button2').disabled = false;
getElementById('button3').disabled = false;
getElementById('button4').disabled = false;">
</li>
</div>
</ul>
２や３にAタグであたいをつけて [http:www.OOO.jp/OOO#3]とかで
外部からこのURLをクリックした時に １ではなくユーザーがわが指定した３とかに飛ぶようにしたいです
できれば詳細なコードの提示は避けたいですがこれ以上必要な場合は言ってくれれば
提示します。
ボタンの様子しかわかりません。ページの大枠のhtmlとその表示を切り替える仕組みがわかるコードの提示をしてもらえますか。あと、コードはこの欄ではなく、追記としてMarkdown記法を使って提示してもらえると回答側にもよりわかりやすくなります。
追記しておきます
論として指摘すべきは、リスト要素(ul)の子要素に div 要素が使われていることです。
li要素だけが許される。
回答3件
0
ベストアンサー
ベタな方法ですが、以下のコードを追加すればできるのでは。
JqvaScript
1const urlHash = location.hash; 2const btnNumbers = ['1','2','3','4','5']; 3const n = urlHash.replace('#', ''); 4 5if (urlHash && btnNumbers.indexOf(n) != -1) { 6 document.getElementById('button' + n).click(); 7} 8
投稿2020/12/26 12:09
編集2020/12/26 12:11総合スコア1907
はぅ、やはり飛ばないみたいです。
本当にここまで検討してくださってとても心から感謝しています。
もしまだ検討してくださるのなら
しばらくポートを開放したいと思います。
よろしければ一度見に来てください。
ページの読み込みがすべて完了した時点で上記コードが発火するようにすればいけるはずですが。
やってみます
すみません！
たぶん飛ぶ。。。ことはできてると思います。。。ただ見て欲しいんですが
なにかおかしいんです。なんらかのズレが生じています。
原因はおそらく
ボタンを押しているわけではないから？」か、
表示がおかしいんです。これは URL＃３でアクセスされた時に
「３のページを表示する」プログラムが実行されたと同時にボタンを押す必要があるのでしょうか。。。
提示してくれたコードは、１，２，３，４，５のいづれかでアクセスされたとき
１～５の中で該当するボタンを押すプログラムですよね。
それで表示されるように設定されたものだと考えていいのでしょうか
はい、その通りです。「表示がおかしい」というのは具体的にはどんな感じですか。
たぶん関係なかったかもしれません
aタグで飛ばすことができたんですが、、、表示がとんでもなことになったので。。
Cerfwebさんが提示してくれたプログラムが動作したのかなと思ったんですが
C言語に詳しい友達にみてもらったら ボタンを押すプログラムだから関係ないよといわれたので！
「あ、これもしかしてAタグでとんだから表示が狂ったんだな」と理解しました。
具体的にといいますか 横に隠れてるページ（コンテンツ）に飛んだために位置ずれを引き起こしてしまっただけです。
cerfwebさん！あと少しで出来そうです。
提示してくれたコードの
const btnNumbers = ['1','2','3','4','5'];＜ここには 各ページのID名をはればよいのでしょうか。
それともボタンのIDなのでしょうか・・・
<input type="button" class="nab"
value="2"
id="button2" disabled
onclick="disabled = true;
getElementById('button1').disabled = false;
getElementById('button3').disabled = false;
getElementById('button4').disabled = false;
getElementById('button5').disabled = false;">
ボタンのID番号にしてあります。
はぅｗ
どうやら飛ぶ動作は行われているようです！
ボタンのID番号は 「button番号」なので
const btnNumbers = ['1','2','3','4','5'];を
↓
const btnNumbers = ['button1','button2','button3','button4','button5'];にして
「URL＃button3」１～５を順番に検索をすると
どんどんしたに下がっていく現象を確認しました。
確認なんですがボタンのIDがもとから 「button○○」の「button」がついているのですが
提示してくださったコードの一番した、
const urlHash = location.hash;
const btnNumbers = ['button1','button2','button3','button4','button5'];
const n = urlHash.replace('#', '');
if (urlHash && btnNumbers.indexOf(n) != -1) {
document.getElementById('button' + n).click();
} ↑こことかぶってても大丈夫ですか？
配列に'button1','button2'... と入れる場合は、URLも#1ではなく#button1とする必要があります。また、('button' + n) の部分はbuttonbutton1となってしまうため、(n)としてください。
はぅｗ
できました！
本当にありがとうございます。
0
###URL(リンク)を読み取ってボタンを押す仕組みでページを開く。
今回、HTMLファイル（index.html）をリンクで指定したIDでアクセスしたときに
ページ内でスライドコンテンツがページとしての役割を果たしているため、
aタグで値付けして飛んでも、ページが開かない問題に直面しました。
理由は**｛ ボタンを押してコンテンツが動作する仕組みになっているため ｝**
回答者さまからの提案としては
URLを読み取ってボタンを押す仕組みでページを開くプログラムが必要だと助言をいただきました。
回答者cerfwebさんから提供してくださったコードにより以上が解決しました。
Javascript
1const urlHash = location.hash; 2const btnNumbers = ['1','2','3','4','5']; 3const n = urlHash.replace('#', ''); 4 5if (urlHash && btnNumbers.indexOf(n) != -1) { 6 document.getElementById('button' + n).click(); 7}
投稿2020/12/29 05:45
総合スコア28
あなたの回答
tips
プレビュー
