どの<li><a>が押されたか判別した後、CSSを変更したい????

♡o｡.｡o♡o｡.｡o♡o｡.｡o♡o｡.｡o♡o｡.｡o♡o｡.｡o♡o｡.｡o♡
.div1のどれかのliが押されたら、そのliのクラス名にactiveを追加する。
もし、
.div1のliのクラス名の中に、activeがあるとすれば、.div2の
background-color: green;にしたいです。
いまここまでできているのですが、どうすればいいでしょうか？

html
1<div class='div1'>
2  <ul>
3      <li><a class="" href="#1">111</a></li>
4      <li><a class="" href="#2">222</a></li>
5      <li><a class="" href="#3">333</a></li>
6    </ul>
7</div>
8<div class='div2'>
9  <p class="number4 circle " style="">4</p>
10</div>

javascript
1// #div1タブの識別がしたい
2    $('.div li a').click(function(){
3        if($(this).hasClass('active')){
4            return false;
5        }
6        
7        var target = $(this).attr('href');
8        //どのliが押されたかの判定
9        
10        $('.div li a).removeClass('active');
11        //これいる？
12        
13        $(this).addClass('active');
14        //thisには何が入る？
15        return false;
16    });
17

css
1.circle {
2  border: solid 5px red;
3  position: absolute;
4  width: 50px;
5  height: 50px;
6  text-align: center;
7  background-color: yellow;
8  border-radius: 25px;
9  font-size:30px;
10  top: 200px;
11  left: 100px;
12}
13
14.active{
15  background-color: green;
16}

よろしくおねがいします٩(๑❛ᴗ❛๑)۶
♡o｡.｡o♡o｡.｡o♡o｡.｡o♡o｡.｡o♡o｡.｡o♡o｡.｡o♡o｡.｡o♡

takato

2016/01/29 04:08

あなたの場合質問してそのままほったらかしにしている事が多いです。折角質問に答えてくれている方に対して非常に失礼だと思いませんか？今までした質問すべて解決させてください。

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

回答2件

div1のlistに連動するような感じですかね？
もっと分かりやすく書けそうですが...取りあえず動きます。

javascript
1var selector = $('.div1 ul li a');
2
3selector.on('click', function(){
4  if($(this).hasClass('active')){
5    $(this).removeClass('active');
6    $('.number4').removeClass('active');
7  } else{
8    if(selector.hasClass('active')){
9      selector.removeClass('active');
10    }
11    $(this).addClass('active');
12    $('.number4').addClass('active');
13  }
14});

投稿2016/01/29 04:25

rossi46hiro

総合スコア992

chu_xxx_lip

2016/01/29 04:54

ありがとうございます٩(๑❛ᴗ❛๑)۶ シンプルな書き方を勉強したいです。 $('.div1 ul li a') は何が入ったのでしょうか？

rossi46hiro

2016/01/29 05:31

そのままですが「$('.div1 ul li a')」が入ります。何回か出てくるためそのたびに検索させない意図で最初に変数に入れてしまってます。

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

ベストアンサー

やりたいことは、こういうことかな、と思ったのですが、合っていますか。

html
1<html>
2  <script src="https://code.jquery.com/jquery-2.2.0.min.js" >
3  </script>
4
5  <style>
6    .circle {
7      border: solid 5px red;
8      position: absolute;
9      width: 50px;
10      height: 50px;
11      text-align: center;
12      background-color: yellow;
13      border-radius: 25px;
14      font-size:30px;
15      top: 200px;
16      left: 100px;
17    }
18
19    .active {
20      background-color: green;
21    }
22
23    #list_area li span.name {
24      display: none;
25    }
26  </style>
27  <body>
28  <div id="list_area">
29      <ul>
30        <li><a href="#">111<span class="name">111</span></a></li>
31        <li><a href="#">222<span class="name">222</span></a></li>
32        <li><a href="#">333<span class="name">333</span></a></li>
33      </ul>
34    </div>
35    <div id="circle_area">
36      <p class="number4 circle " style="">4</p>
37    </div>
38  </body>
39  <script>
40    $(function() {
41      $('#list_area li a').click(function() {
42        var $a = $(this);
43        if ($a.hasClass('active')) {
44          return false;
45        }
46        $('#list_area li a').removeClass('active');
47        $a.addClass('active');
48        var name = $a.children('span.name').text();
49        $('#circle_area p.circle').text(name);
50        return false;
51      });
52    });
53  </script>
54</html>