Each Tab normal state displays one picture, while the selected state displays another picture?

topic description

I can make it possible to display a different picture on each tab, but how can I go one step further so that each Tab displays one picture in its normal state and another picture in the selected state?

sources of topics and their own ideas

when I meet this requirement when I am working on a project again, I have no idea

.

related codes

/ / Please paste the code text below (do not replace the code with pictures)
< ul class= "tabClick" > 

        <li class="active">
            <img src="img/icon/data.png" alt="">
        </li>
        <li>
            <img src="img/icon/kc.png" alt="">
        </li>
        <li>
            <img src="img/icon/ls.png" alt="">
        </li>
    </ul>
    
    js

what result do you expect? What is the error message actually seen?

I hope I can give a hint.

Html javascript
Oct.23,2021
Replace the picture in the url of img when the

event is triggered;
1. Two-way binding directly manipulates data
2. Native js can use getAttribute to get url and assign a value

each tab tag has a selected state or not. According to different states, render different images

selected tab plus an active class, define the active style of each tab in css, and set the icon of the selected state in active:after

. 
<li class="active">
    <img src="img/icon/data.png" class="icon_off" alt="">  
    <img src="img/icon/data_on.png" class="icon_on" alt="">   
</li>

.icon_off {
   display: block;
}
.icon_on {
   display: none; 
}

.active .icon_off {
    display: none;
}

.active .icon_on {
    display: block;
}

this is the way I handled it before, and I hope it will be helpful

Previous: Baidu map coordinate js interface cannot call function

Next: Why is the definition of bootstrap raster less source code added to avoid compilation

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu