2回クリックする必要がある、以下のJSを一回のクリックで実行するにはどうしたら良いでしょうか。

2回クリックする必要がある、以下のJSを一回のクリックで実行するにはどうしたら良いでしょうか。
(1)$("#tabBoxes div.box").hide();
の後に、
$($(this).attr("href")).fadeToggle();
を実行したいです。
よろしくお願い致します。

JS
1$(function(){
2        $("#tabMenu li a").on("click", function() {
3            $("#tabBoxes div.box").hide();
4            $($(this).attr("href")).fadeToggle();
5        });
6    });

HTML
1<ul class="sr_menu clearfix" id="tabMenu">
2    <li><a href="#tabBox1"><img src="../img/sr_menu_01.png" class="zoom"/></a></li>
3    <li><a href="#tabBox2"><img src="../img/sr_menu_02.png" class="zoom" /></a></li>
4    <li><a href="#tabBox3"><img src="../img/sr_menu_03.png" class="zoom" /></a></li>
5</ul>
6
7<div id="tabBoxes">
8	<div id="tabBox1" class="box"></div>
9	<div id="tabBox2" class="box"></div>
10	<div id="tabBox3" class="box"></div>
11</div>

s8_chu

2017/09/08 08:11

HTMLを追記していただけませんか？

yambejp

2017/09/08 08:13

HTMLソースも追記してもらったほうがよいかと。ただしアンカーをクリックしたらリンク先に飛んじゃうような気がしますので２回クリックのくだりがよくわかりません

shingosuchin

2017/09/08 08:16

HTML追記しました。

yambejp

2017/09/08 08:26

消してからtoggleするということはfadeInしているだけのように見えますが

行動規範の内容に同意します

回答1件

的外れかもしれませんが、質問者さんが想像している動作は以下のような動作でしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        .box {
8            width: 100px;
9            height: 100px;
10            margin-bottom: 5px;
11        }
12
13        .box:nth-of-type(1) {
14            background-color: #a9ff3a;
15        }
16
17        .box:nth-of-type(2) {
18            background-color: #ff58b9;
19        }
20
21        .box:nth-of-type(3) {
22            background-color: #20cceb;
23        }
24    </style>
25</head>
26<body>
27<ul class="sr_menu clearfix" id="tabMenu">
28    <li>
29        <a href="#tabBox1">
30            <img src="http://placehold.jp/3d4070/ffffff/150x150.png?text=../img/sr_menu_01.png" class="zoom">
31        </a>
32    </li>
33    <li>
34        <a href="#tabBox2">
35            <img src="http://placehold.jp/3d4070/ffffff/150x150.png?text=../img/sr_menu_02.png" class="zoom">
36        </a>
37    </li>
38    <li>
39        <a href="#tabBox3">
40            <img src="http://placehold.jp/3d4070/ffffff/150x150.png?text=../img/sr_menu_03.png" class="zoom">
41        </a>
42    </li>
43</ul>
44<div id="tabBoxes">
45    <div id="tabBox1" class="box"></div>
46    <div id="tabBox2" class="box"></div>
47    <div id="tabBox3" class="box"></div>
48</div>
49<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
50<script>
51    $(function () {
52        $("#tabMenu li a").on("click", function () {
53            $("#tabBoxes div.box").hide();
54            $($(this).attr("href")).fadeToggle();
55            return false;
56        });
57    });
58</script>
59</body>
60</html>