javascript How do I change the bold text and bg color of the selected tab?

<script type="text/javascript">
    functionChangeTab(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><aonclick="ChangeTab('tab1');return false;" class="tab1" href="#tab1">1Channel through 2Channel</a>li>;;;
    <li><aonclick="ChangeTab('tab2');return false;" class="tab2" href="#tab2">4Channel through 8Channel</a>li>;;;;
    <li><aonclick="ChangeTab('tab3');return false;" class="tab3" href="#tab3">16 Channel</a><li>
</ul>
<div class="tab" id="tab1">Contents</div>
<div class="tab" id="tab2">Contents</div>
<div class="tab" id="tab3">Contents</div>

<script type="text/javascript">
    ChangeTab('tab1');          
</script>

How do I change the boldface and bg color of li selected above?

javascript

2022-09-30 14:15

1 Answers

I changed the tabname to a number and wrote that the bg color should be changed.(Please use the same bold text.)

window.onload=function(){
        ChangeTab(0);
    }
    functionChangeTab(no){
        document.getElementById('tab1').style.display='none';
        document.getElementById('tab2').style.display='none';
        document.getElementById('tab3').style.display='none';
        variable_li = document.getElementsByTagName("li");
        for(vari=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';
    }

<ul class="tabs">
    <li><aonclick="ChangeTab(0);return false;" class="tab1" href="#tab1">1Channel through 2Channel</a><li>;;;
    <li><aonclick="ChangeTab(1);return false;" class="tab2" href="#tab2">4Channel through 8Channel</a><li>;;
    <li><aonclick="ChangeTab(2);return false;" class="tab3" href="#tab3">16Channel</a>/li>;;
</ul>
<div class="tab" id="tab1">Contents 1</div>
<div class="tab" id="tab2">Contents 2</div>
<div class="tab" id="tab3">Contents 3</div>

2022-09-30 14:15

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656