イメージマップを作成しています。
<area>タグをクリックすると他ページに移動ではなく、map下に.tabContentsの#place1が表示されるようになっています。
これにさらにタブ内で指定の場所にアンカーリンクで移動させたくてそちらの方法を探しています。
areaタグに他ページにダイレクトリンクをつける例はいくつかあったのですが、同一ページ内のタブにアンカーリンクで移動させる例は見当たらなく、どのようにしたらいいか困っています。
どうかご教授願います。
jsはareaを押すと内容が開くことだけ記述しています。
------------html------------
<div id="tab-area">
<img src="./img_add/place/imagemap_on.png" alt="" usemap="#shape1" id="shape1">
<map name="shape1">
<area shape="rect" coords="630,408,710,441" name="#place1" alt="東京" href="#TK">
<area shape="rect" coords="630,441,710,472" name="#place1" alt="神奈川" href="#KN">
<area shape="rect" coords="630,472,710,504" name="#place1" alt="埼玉" href="#ST">
<area shape="rect" coords="630,504,710,537" name="#place1" alt="千葉" href="#CB">
</map>
<div class="tabContents">
<div id="place1">
<h4 id="TK">東京</h4>
<div class="comment">...</div>
<h4 id="KN">神奈川</h4>
<div class="comment">...</div>
<h4 id="ST">埼玉</h4>
<div class="comment">...</div>
<h4 id="CB">千葉</h4>
<div class="comment">...</div>
</div>
</div>
</div>
------------js------------
$(function() {
$(document).on('click', '#tab-area area', function() {
$('#tab-area .tabContents > div').hide();
$($(this).attr('name')).show();
$('#tab-area area').removeClass('current');
$(this).addClass('current');
return false;
});
});
No.1ベストアンサー
- 回答日時:
「30代・女性」ではありませんけれど・・・
え~~っと・・・
<div id="place1">~~</div>の部分が一つのタブを構成していて、これが複数存在するというふうになっているのでしょうか?
マップもそれに応じてname="#place2"やname="#place3"のものがあって、タブを表示し分けているということなのかな?
いずれにしろ、<area>タグのhref属性はページ内ジャンプでも機能するはずですので、これを生かしてあげればご希望のようになると思うのですが。
ということで、機能をキャンセルをしている
return false;
をやめれば動作しませんか?
上記がうまくいかない場合は、area要素のhref属性を取得して、そのidを持つ要素に対して scrollIntoView() でも動作すると思います。
https://developer.mozilla.org/ja/docs/Web/API/El …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
複数のリンク画像を一定時間で...
-
MAX関数を使ってからLEFT JOIN...
-
クリックで色変更後に既に変更...
-
iframe内のリンクが飛ばないの...
-
console.log結果をhtmlで表示し...
-
javascriptテキストBOX色を元に...
-
innerHTMLに代入したインライン...
-
jqueryで要素の中身を要素の外...
-
自働生成される<div>タグに連番...
-
変数内容をHTML内で表示する方法
-
計算結果の表示方法について
-
createElementで作成した要素を...
-
jQueryのアコーディオンメニュ...
-
Firefoxで表示できないのは何故...
-
背景色を一定時間ごとにランダ...
-
HTMLとJavaScriptで作ったタイ...
-
JSPでの画像ファイル表示
-
jspでcssが読み込めない
-
Javascriptで指定した日付と時...
-
Slick.jsのオプションrtlについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
createElementで作成した要素を...
-
removeEventListenerについて
-
クリックで色変更後に既に変更...
-
iframe内のリンクが飛ばないの...
-
[急ぎ] videoタグで埋め込んだm...
-
背景色を透明化
-
console.log結果をhtmlで表示し...
-
表示・非表示のスクリプトで、...
-
getElementByIdの戻り値がnull...
-
removeAttribute()メソッドで削...
-
テキストエリア内の一部の文字...
-
タブで開いてさらにタブ内をア...
-
IFRAMEの表示/非表示を切り替え...
-
変数内容をHTML内で表示する方法
-
HTMLタグに複数のクラスを設定...
-
jQueryのアコーディオンメニュ...
-
取得した要素がインライン要素...
おすすめ情報