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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1337閲覧

タブ内のaタグをマウスオーバーした時の動作について

canazawa__

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/03/01 01:34

編集2019/03/01 01:50

タブをマウスオーバーで切り替えるナビゲーションを作成したいのですが、
タブの中身( <div class="hide"></div>の中)にaタグを追加し、
そのaタグをマウスオーバーするとタブの中身(<div class="hide"></div>)がdisplay:noneになってしまい非表示になってしまいます。
aタグをマウスオーバーしても表示されるようにしたいのですが可能でしょうか?
よろしくお願いいたします。

<head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <title>無題ドキュメント</title> <script> $(function() { $('.tab li').hover(function() { var tabnum = $('.tab li').index(this); $('.content div').css('display','none'); $('.content div').eq(tabnum).css('display','block'); $('.tab li').removeClass('select'); $(this).addClass('select') }); $('.hide').mouseout(function() { this.style.display = "none"; }); }); </script> <style> .tabmenu { width: 60%; } .tab { overflow: hidden; margin: 0; padding: 0; list-style: none; } .tab li { cursor: pointer; display: inline-block; width: auto; padding: .3em; font-weight: bold; } .tab li.select { border-bottom: solid 4px #fdbb30; } .content div { height: auto; padding: .6em; border: solid 1px #ccc; } .hide { display: none; } </style> </head> <body> <div class="tabmenu"> <ul class="tab"> <li><a href="dummy">ひとつめのタブ</a></li> <li>ふたつめのタブ</li> <li>みっつめのタブ</li> </ul> <div class="content"> <div class="hide"><a href="dummy">ひとつめのなかみ</a></div> <div class="hide">ふたつめのなかみふたつめのなかみ</div> <div class="hide">みっつめのなかみみっつめのなかみみっつめのなかみ</div> </div> </div> </body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2019/03/01 01:37

(質問文は編集できます)質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
canazawa__

2019/03/01 01:43

失礼いたしました。<code>の中に記述いたしました。よろしくお願いいたします。
yambejp

2019/03/01 01:48

質問はなんでしょう?
canazawa__

2019/03/01 01:51

yambejpさん 失礼いたしました。質問内容を編集いたしました。 お手数をおかけいたしますがご確認をお願いいたします。
guest

回答1

0

ベストアンサー

javascript

1$(function() { 2 $('.content div').hide(); 3 $('.tabmenu .tab li').on('mouseover',function(e) { 4 var tabnum = $('.tab li').index(this); 5 $('.content div').hide().eq(tabnum).show(); 6 $('.tab li').removeClass('select'); 7 $(this).addClass('select') 8 }); 9 $('.tabmenu').on('mouseleave',function(e) { 10 $('.content div').hide(); 11 $('.tab li').removeClass('select'); 12 }); 13});

投稿2019/03/01 02:08

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

canazawa__

2019/03/01 02:15

yambejpさん ありがとうございました! まさにこの動きがしたかったです。 とても助かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問