如何使用Javascript將li更改爲主動點擊？

我正在嘗試使用Javascript將單擊列表項目上的li類更改爲「active」。我試圖實現我已經鏈接到&下面粘貼的代碼，但我一直沒有能夠得到它的工作。有人能幫我弄清楚我出錯的地方嗎？如何使用Javascript將li更改爲主動點擊？

HTML：

<ul id="homelist"> 
    <li class="hlist1"> 
     <div class="tybtns"> 
      <img alt="Touchpoint Map" src= 
      "http://www.allegraaz.com/wp-content/uploads/2016/04/buttons.jpg"> 
      <ul class="touch"> 
       <li class="t1"><span></span> <img alt="Touch 1 Direct Mail" 
       src= 
       "http://www.allegraaz.com/wp-content/uploads/2016/05/t1a.jpg"> 
       <img alt="Touch 1 Direct Mail" src= 
       "http://www.allegraaz.com/wp-content/uploads/2016/05/t1b.jpg"> 
       </li> 
       <li class="t2"><span></span> <img alt="Touch 2 Email" src= 
       "http://www.allegraaz.com/wp-content/uploads/2016/05/t2a.jpg"> 
       <img alt="Touch 2 Email" src= 
       "http://www.allegraaz.com/wp-content/uploads/2016/05/t2b.jpg"> 
       </li> 
       <li class="t3"><span></span> <img alt= 
       "Touch 3 Personalized URL" src= 
       "http://www.allegraaz.com/wp-content/uploads/2016/05/t3a.jpg"> 
       <img alt="Touch 3 Personalized URL" src= 
       "http://www.allegraaz.com/wp-content/uploads/2016/05/t3b.jpg"> 
       </li> 
       <li class="t4"> 
        <span></span> <a class="playSound"><img alt= 
        "Touch 4 Mobile-Text" src= 
        "http://www.allegraaz.com/wp-content/uploads/2016/04/touch4_01-e1460158229527.jpg"> 
        </a> <img alt="Touch 4 Mobile-Text" src= 
        "http://www.allegraaz.com/wp-content/uploads/2016/04/t4text-e1460564587270.jpg"> 
        </li> 
       <li class="t5"><span></span> <img alt= 
       "Touch 5 Social Media" src= 
       "http://www.allegraaz.com/wp-content/uploads/2016/05/t5a.jpg"> 
       <img alt="Touch 5 Social Media" src= 
       "http://www.allegraaz.com/wp-content/uploads/2016/05/t5b.jpg"> 
       </li> 
      </ul> 
     </div> 
    </li> 
</ul>

CSS：

#homelist li { 
    list-style-type: none; 
} 

.tybtns { 
    margin: 20px auto; 
    max-width: 765px; 
    position: relative; 
} 

#homelist li.hlist1 .tybtns img { 
    display: block; 
    float: none; 
    margin: 0 auto; 
} 

#homelist .tybtns li { 
    list-style: outside none none; 
} 

#homelist .tybtns li span { 
    cursor: pointer; 
    height: 70px; 
    left: 8px; 
    position: absolute; 
    top: 5px; 
    width: 70px; 
} 

#homelist .tybtns li.t2 span { 
    left: 176px; 
} 

#homelist .tybtns li.t3 span { 
    left: 345px; 
} 

#homelist .tybtns li.t4 span { 
    left: 513px; 
} 

#homelist .tybtns li.t5 span { 
    left: 682px; 
} 

#homelist li.hlist1 .tybtns li img { 
    display: none; 
} 

#homelist li.hlist1 .tybtns li.active img { 
    display: inline-block; 
    vertical-align: top; 
} 

#homelist .tybtns li.t1 span::after,#homelist .tybtns li.t2 span::after,#homelist .tybtns li.t3 span::after,#homelist .tybtns li.t4 span::after,#homelist .tybtns li.t5 span::after { 
    border-bottom: 1px solid #fff; 
    bottom: -20px; 
    content: "Touch 1 - Direct Mail"; 
    display: block; 
    font-size: 11px; 
    left: -25px; 
    position: absolute; 
    text-align: center; 
    width: 110px; 
} 

#homelist .tybtns li.t2 span::after { 
    content: "Touch 2 - Email"; 
} 

#homelist .tybtns li.t3 span::after { 
    content: "Touch 3 - pURL"; 
} 

#homelist .tybtns li.t4 span::after { 
    content: "Touch 4 - Mobile"; 
} 

#homelist .tybtns li.t5 span::after { 
    content: "Touch 5 - Social"; 
} 

#homelist .tybtns li.t1.active span::after { 
    border-bottom: 1px solid #bad636; 
} 

#homelist .tybtns li.t2.active span::after { 
    border-bottom: 1px solid #9f2065; 
} 

#homelist .tybtns li.t3.active span::after { 
    border-bottom: 1px solid #f7941f; 
} 

#homelist .tybtns li.t4.active span::after { 
    border-bottom: 1px solid #1b7ba3; 
} 

#homelist .tybtns li.t5.active span::after { 
    border-bottom: 1px solid #606062; 
}

的JavaScript：

$(".touch span").click(function() { 
    if ($(this).parent().hasClass('active')) { 
     (this).parent().removeClass('active'); 
    } else { 
     (".touch span").parent().removeClass('active'); 
     (this).parent().addClass('active'); 
    } 
});

來源

2016-08-26 user6761939

你在你的代碼中包含了jQuery嗎？ – yuriy636

您是代碼工程師，但您忘記在'JavaScript'部分中啓用JQuery。 –

在jsfiddle中，點擊Javascript這個詞，然後從框架和擴展選擇Jquery 3.1.0，它將工作 –

-1

這是非常困難的點擊一個空的跨度內，也許你想做出不同的標記，即

<li class="t1"> 
    <span> 
     <img src="http://www.allegraaz.com/wp-content/uploads/2016/05/t1a.jpg" alt="Touch 1 Direct Mail" /> 
     <img src="http://www.allegraaz.com/wp-content/uploads/2016/05/t1b.jpg" alt="Touch 1 Direct Mail" /> 
    </span> 
</li>

你也忘了打電話的JQuery以下行：$(".touch span").parent().removeClass('active'); - 你的代碼在開始時沒有$。

來源

2016-08-26 15:02:51

-1

如果你使用一些jQuery資源，你必須調用是你的頁面。這樣做，它會沒事的。你的代碼是正確的。 :)

這裏是你的鏈接，現在用jQuery鏈接。

https://jsfiddle.net/d9m7h0oe/3/

來源

2016-08-26 15:03:47

你需要在你的小提琴加載jQuery的。您可以在設置COG使它在JavaScript部分

從框架&擴展選擇下拉菜單中的jQuery的首選版本，你應該是好去。
一旦我改變了這個設置，一切都奏效了，我看起來很棒！

來源

2016-08-26 15:04:27

正如@Jonathan Seed所述，您需要將jQuery添加到您的JSFiddle才能使其工作。我想補充一點，可以簡化您的jQuery代碼...

$(".touch span").click(function() { 
    $('.touch span').parent().removeClass('active'); 
    $(this).parent().addClass('active'); 
});

此之前通過重新添加它的特定父去除所有.touch span父母active類不再需要爲條件語句一個被點擊。

來源

2016-08-26 15:13:42

如何使用Javascript將li更改爲主動點擊？

回答

相關問題