回答編集履歴
4
注意点追記
answer
CHANGED
|
@@ -56,3 +56,5 @@
|
|
|
56
56
|
|
|
57
57
|
##補足
|
|
58
58
|
dataメソッドについては作る方が自由に設定できますし、設定値も作りによって作り手の自由です。
|
|
59
|
+
CSSやJavaScriptフレームワークなどが使っている場合があるので、重複しないように気をつけてください。
|
|
60
|
+
※動的に追加したり消したり更新したりしている場合があるのでデベロッパーツールなどで確認すると良いでしょう。
|
3
対応手順まとめました・・・
answer
CHANGED
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
※とりあえず実現できるレベルのコードで長たらしくなってしまってますので、
|
|
7
7
|
最適コード書ける方のご指導いただきたく・・・
|
|
8
8
|
|
|
9
|
+
#サンプルソース
|
|
9
10
|
```JavaScript
|
|
10
11
|
<a href="#!" data-target="blank" data-link="1.html">1</a>
|
|
11
12
|
<a href="#!" data-target="move" data-link="2.html">2</a>
|
|
@@ -41,10 +42,17 @@
|
|
|
41
42
|
```HTML
|
|
42
43
|
<a href="#!" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image" data-target="blank" data-link="<?php echo $_product->getProductUrl() ?>">テキストリンク</a>
|
|
43
44
|
```
|
|
44
|
-
hrefの値を「#!」にし、
|
|
45
|
-
data-target="XXX"とdata-link="XXX"を追加します。
|
|
46
|
-
data-link="XXX"の内容がアクセス先URLです。
|
|
47
|
-
data-target="XXX"は同一タブで遷移したいか、別タブで遷移したいかで同一タブなら「move」別タブなら「blank」を設定しています。
|
|
48
|
-
※同環境が準備できそうにないので動作確認はできていませんが、修正イメージが伝わったら幸いです
|
|
49
45
|
|
|
46
|
+
##対応の手順方法
|
|
47
|
+
0. hrefの値を「#!」にする（別タブ遷移対象だけでOK）
|
|
48
|
+
0. data-link="XXX"を追加します（別タブ遷移対象だけでOK）
|
|
49
|
+
※data-link="XXX"のXXXは遷移先URLに置き換えてください。
|
|
50
|
+
0. data-target="XXX"を追加します（別タブ遷移対象だけでOK）
|
|
51
|
+
※data-target="XXX"は同一タブで遷移したいか、別タブで遷移したいか
|
|
52
|
+
別タブならXXXに「blank」を設定しています
|
|
53
|
+
|
|
54
|
+
※hrefにリンク先が設定されている場合はどうやっても同一タブに遷移するので別タブ遷移を設定したい先だけでも実現可能です。
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
##補足
|
|
50
58
|
dataメソッドについては作る方が自由に設定できますし、設定値も作りによって作り手の自由です。
|
2
提示コード修正
answer
CHANGED
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
##コメントからの追記：
|
|
40
40
|
提示のコード（HTML/PHP）を書き換える場合
|
|
41
41
|
```HTML
|
|
42
|
-
<a href="#!"
|
|
42
|
+
<a href="#!" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image" data-target="blank" data-link="<?php echo $_product->getProductUrl() ?>">テキストリンク</a>
|
|
43
43
|
```
|
|
44
44
|
hrefの値を「#!」にし、
|
|
45
45
|
data-target="XXX"とdata-link="XXX"を追加します。
|
1
コメントからの追記
answer
CHANGED
|
@@ -25,12 +25,26 @@
|
|
|
25
25
|
target = $(this).data("target");
|
|
26
26
|
link = $(this).data("link");
|
|
27
27
|
if(!sp && target == "blank"){
|
|
28
|
-
window.open(link, '_blank'); // 別タブ
|
|
28
|
+
window.open(link, '_blank'); // 別タブによる遷移
|
|
29
29
|
}else{
|
|
30
|
-
window.location.href = link; // 通常の遷移
|
|
30
|
+
window.location.href = link; // 同一タブによる通常の遷移
|
|
31
31
|
}
|
|
32
32
|
});
|
|
33
33
|
</script>
|
|
34
34
|
```
|
|
35
35
|
data-XXXのXXXは任意なので好みと用途にあわせた名称にしてください。
|
|
36
|
-
PCかつblankであれば別タブ表示、そうでなければ同タブ遷移としています。
|
|
36
|
+
PCかつblankであれば別タブ表示、そうでなければ同タブ遷移としています。
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
##コメントからの追記：
|
|
40
|
+
提示のコード（HTML/PHP）を書き換える場合
|
|
41
|
+
```HTML
|
|
42
|
+
<a href="#!" target="_blank" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image" data-target="blank" data-link="<?php echo $_product->getProductUrl() ?>">テキストリンク</a>
|
|
43
|
+
```
|
|
44
|
+
hrefの値を「#!」にし、
|
|
45
|
+
data-target="XXX"とdata-link="XXX"を追加します。
|
|
46
|
+
data-link="XXX"の内容がアクセス先URLです。
|
|
47
|
+
data-target="XXX"は同一タブで遷移したいか、別タブで遷移したいかで同一タブなら「move」別タブなら「blank」を設定しています。
|
|
48
|
+
※同環境が準備できそうにないので動作確認はできていませんが、修正イメージが伝わったら幸いです
|
|
49
|
+
|
|
50
|
+
dataメソッドについては作る方が自由に設定できますし、設定値も作りによって作り手の自由です。
|