
[code]

    <script type="text/javascript">
        function ChangeTab(tabname) {
            document.getElementById('tab1').style.display = 'none';
            document.getElementById('tab2').style.display = 'none';
            document.getElementById('tab3').style.display = 'none';
            if(tabname) {
                document.getElementById(tabname).style.display = 'block';               
            }
        }
    </script>
    
    <ul class="tabs">
        <li><a onclick="ChangeTab('tab1'); return false;" class="tab1" href="#tab1">1Channel ~ 2Channel</a></li>
        <li><a onclick="ChangeTab('tab2'); return false;" class="tab2" href="#tab2">4Channel ~ 8Channel</a></li>
        <li><a onclick="ChangeTab('tab3'); return false;" class="tab3" href="#tab3">16Channel</a></li>
    </ul>
    <div class="tab" id="tab1">内容</div>
    <div class="tab" id="tab2">内容</div>
    <div class="tab" id="tab3">内容</div>
    
    <script type="text/javascript">
        ChangeTab('tab1');          
    </script>
    
[/code]

* * *

上記の内容で選択されたliを太文字とbgカラーを変更するにはどうすればいいですか。


CC BY-SA 3.0
2017-05-23T01:38:00.333
34944
2017-05-23T08:16:23.233
2017-05-23T01:53:01.403
19110
23304
question
javascript
javascript 選択されたタブの太文字とbgカラーを変更する方法を教えてください。


tabnameを番号にかえて bgカラーが変更するように書いてみました。（太文字も同じ要領で付けて下さい）

[code]

        window.onload = function() {
            ChangeTab(0);
        }
        function ChangeTab(no) {
            document.getElementById('tab1').style.display = 'none';
            document.getElementById('tab2').style.display = 'none';
            document.getElementById('tab3').style.display = 'none';
            var elem_li = document.getElementsByTagName("li");
            for(var i=0;i<elem_li.length;i++){
                elem_li[i].style.backgroundColor = '';
            }
            elem_li[no].style.backgroundColor = 'red';
            document.getElementById('tab'+(parseInt(no)+1)).style.display = 'block';
        }
[/code]

[code]

    <ul class="tabs">
        <li><a onclick="ChangeTab(0); return false;" class="tab1" href="#tab1">1Channel ~ 2Channel</a></li>
        <li><a onclick="ChangeTab(1); return false;" class="tab2" href="#tab2">4Channel ~ 8Channel</a></li>
        <li><a onclick="ChangeTab(2); return false;" class="tab3" href="#tab3">16Channel</a></li>
    </ul>
    <div class="tab" id="tab1">内容1</div>
    <div class="tab" id="tab2">内容2</div>
    <div class="tab" id="tab3">内容3</div>
[/code]


CC BY-SA 3.0
2017-05-23T08:09:51.463
34960
2017-05-23T08:16:23.233
2017-05-23T08:16:23.233
22793
22793
34944
answer