2017-10-15 78 views
-1

我想要做的是有三個按鈕,都具有相同的文本列表,但是當每個按鈕被點擊時,只有一定數量的行中的文本行是其他顏色設置的默認顏色。使用javascript與按鈕來改變文本的顏色(列表)

例如..

按鈕一個5/10彩色 兩個按鈕7/10彩色 三個按鈕10/10,有色

基本上這個東西

https://www.hubspot.com/pricing/marketing

感謝狀

+0

[歡迎StackOverflow的,請查看此網頁。(https://stackoverflow.com/help/how-to-ask) – Editor

+0

歡迎堆棧溢出。請回顧[我如何問一個好問題](https://stackoverflow.com/help/how-to-ask)。你已經嘗試過什麼了?這不是一個代碼寫作或輔導服務。問題應該顯示**研究證據和嘗試自己解決問題**,清楚地列出您的特定編碼相關問題以及[最小,完整和可驗證示例]中的任何相關代碼(https:// stackoverflow .com/help/mcve),所以我們有足夠的信息能夠提供幫助。 – FluffyKitten

回答

1

下面是我相信你問的一個粗略例子爲...而努力。

<html> 
<style> 
    .selected { 
     background-color: yellow; 
    } 
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#btn1').click(function() { 
     setSelected(1, 3); 
     }); 
     $('#btn2').click(function() { 
     setSelected(1, 6); 
     }); 
     $('#btn3').click(function() { 
     setSelected(1, 9); 
     }); 
    }); 

    function setSelected(lower, upper) { 
     for(var i = lower; i <= upper; i++) { 
      $('#itm' + i).addClass('selected'); 
     } 
     for(var i = upper+1; i <= 9; i++) { 
      $('#itm' + i).removeClass('selected'); 
     } 
    } 
</script> 
<input id="btn1" type="button" value="Button 1"/> 
<input id="btn2" type="button" value="Button 2"/> 
<input id="btn3" type="button" value="Button 3"/> 
<ol> 
    <li id="itm1">Item 1</li> 
    <li id="itm2">Item 2</li> 
    <li id="itm3">Item 3</li> 
    <li id="itm4">Item 4</li> 
    <li id="itm5">Item 5</li> 
    <li id="itm6">Item 6</li> 
    <li id="itm7">Item 7</li> 
    <li id="itm8">Item 8</li> 
    <li id="itm9">Item 9</li> 
</ol> 
</html> 
+0

非常感謝:) –

+0

@TonyP:如果它解決了您的問題,請接受答案。閱讀更多:https://stackoverflow.com/help/someone-answers –