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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2128閲覧

YahooショッピングでのJQueryのa hrefがreturn:falseされない

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/10/29 03:53

編集2016/12/17 01:36

解決させたいことは、YahooショッピングでjQueryのbxsliderとタブの切り替えを使用しているのですが、aタグが使われているナビゲーションをクリックした際、リンクが有効になってしまいます。

テストサーバーで同一のhtmlを記述したサイトでは問題なく動作しているのですが、
ご教授いただけますでしょうか。

Yahooショッピングサイト

htmlテストサイト

<script type="text/javascript" > jQuery(document).ready(function(){ jQuery('#slider-na').bxSlider({ pager: false, auto: true, minSlides: 7, maxSlides: 7, slideWidth: 735, slideMargin: 10 }); jQuery('.scroll-pane').jScrollPane(); }); </script> <script> jQuery(document).ready(function(){ jQuery(".tabset").each(function(){ var set = jQuery(this); var btn = set.find("ul.tabset_tab li a"); var setpael = set.find("ul.tabset_tab li a.select"); var panel = set.find(".tabset_panel div"); var setpanelID = jQuery(setpael).attr("href"); //パネル初期設定 jQuery(panel).hide(); jQuery(".tabset_panel div"+setpanelID).show(); //アクション jQuery(btn).click(function(){ jQuery(btn).removeClass("select"); jQuery(this).addClass("select"); jQuery(panel).hide(); jQuery(jQuery(this).attr("href")).show(); return false; }); }); }); </script>

ここから追記

tabsetのタブパネルになります。 <div class="box ranking"> <div class="tabset"> <ul class="tabset_tab"> </div> </div> <!--tabset_end--> </div> </div> bxスライダーの両サイドにあるナビゲーションになります。 <div class="box newarrival"> <ul id="slider-na">

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

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

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

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

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

gin

2016/10/29 04:10

少々分かりづらいのですが、ナビゲーションとはどれのことですか?メインスライダーの下に並んでいるサムネイルのことですか?
退会済みユーザー

退会済みユーザー

2016/10/29 04:38

htmlを追記いたしました。
gin

2016/10/29 04:43

左右の<>が効かずに表示されているスライダーのリンクに飛んでしまうということですね?本番のほうで確認しましたが<>は機能しているようです。ただ最初と最後はそれぞれ片方しか出ないので連打しているとそのページに飛びますが。
退会済みユーザー

退会済みユーザー

2016/10/29 04:51

トップのスライダーではなく、新入荷商品とカテゴリー別ランキングのタブパネルになります。yahooショッピングのhtnlの最後尾にjsが読み込まれてましてそれが原因だと思うのですが、回避策などあればいいのですが、、
guest

回答1

0

ベストアンサー

原因はsc.js内でクリックイベントが設定されていることですね。
試しに

javascript

1Array.prototype.slice.call( document.querySelectorAll('.nolink') ).forEach(elm => 2 elm.addEventListener('click',e =>{ 3 e.stopImmediatePropagation(); 4 e.preventDefault(); 5 }, true) 6);

を実行してみたところ、イベントの発火を妨げることができましたので、clickイベントでjQueryを使うのをやめてuseCapturetrueにし、stopImmediatePropagation() preventDefault()を実行するようにすればいいかもしれません。

また、他のもっとお手軽な対策として、

  • A要素以外を使う
  • removeEventListenerでイベントを消す

等があると思います。

投稿2016/10/29 11:59

Lhankor_Mhy

総合スコア35860

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

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

退会済みユーザー

退会済みユーザー

2016/10/29 12:40

ご回答いただきありがとうございます! 一番簡単な方法のような、A要素ではなくspanタグに変更し『href』を『data-url』に変更してみようと思います。 それと、以下を記述で可能でしょうか。 location.href = jQuery(this).attr('data-url');
Lhankor_Mhy

2016/10/29 12:42

> location.href = jQuery(this).attr('data-url'); これはいらないような気がしますが……?
退会済みユーザー

退会済みユーザー

2016/10/29 13:04

ご回答いただきありがとうございます。 bxsliderは、data-urlでhtmlの方で動きましたが、 tabsetの方が、上記のlocation.href = jQuery(this).attr('data-url');を削除してみましたがクラスのaddclass等が効きませんでした。。
退会済みユーザー

退会済みユーザー

2016/10/29 13:07

http://shopping.geocities.jp/toulife/ yahooの方でご確認いただけますでしょうか。 tabsetのdisplay:none、display:blockが効いていないようです。。
退会済みユーザー

退会済みユーザー

2016/10/29 18:24

アンカータグではなく、spanとh4タグに変更し、無事解決いたしました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問