请问这个要怎么做呀？
有要求吗，如果要求用框架的话可以上网找一些UI框架很容易就可以弄出来，复制粘贴就行；如果要求用HTML+js+css写也可以实现
两个div添加onclick事件，改变背景颜色
选项卡吗 参考https://blog.csdn.net/qq_41148850/article/details/81773463
<span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">title</span>></span><span class="hljs-tag"></<span class="hljs-name">title</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="language-css">
<span class="hljs-comment">/* CSS样式制作 */</span>
* {
<span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;
<span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;
<span class="hljs-attribute">color</span>: <span class="hljs-number">#000000</span>;
}
<span class="hljs-selector-tag">ul</span> {
<span class="hljs-attribute">list-style-type</span>: none;
}
<span class="hljs-selector-tag">a</span> {
<span class="hljs-attribute">text-decoration</span>: none;
}
<span class="hljs-selector-id">#tab-list</span> {
<span class="hljs-attribute">width</span>: <span class="hljs-number">275px</span>;
<span class="hljs-attribute">height</span>: <span class="hljs-number">190px</span>;
<span class="hljs-attribute">margin</span>: <span class="hljs-number">20px</span> auto;
}
<span class="hljs-selector-id">#ul1</span> {
<span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">2px</span> solid <span class="hljs-number">#8B4513</span>;
<span class="hljs-attribute">height</span>: <span class="hljs-number">32px</span>;
}
<span class="hljs-selector-id">#ul1</span> <span class="hljs-selector-tag">li</span> {
<span class="hljs-attribute">display</span>: inline-block;
<span class="hljs-attribute">width</span>: <span class="hljs-number">60px</span>;
<span class="hljs-attribute">line-height</span>: <span class="hljs-number">30px</span>;
<span class="hljs-attribute">text-align</span>: center;
<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#999</span>;
<span class="hljs-attribute">border-bottom</span>: none;
<span class="hljs-attribute">margin-left</span>: <span class="hljs-number">5px</span>;
}
<span class="hljs-selector-id">#ul1</span> <span class="hljs-selector-tag">li</span><span class="hljs-selector-pseudo">:hover</span> {
<span class="hljs-attribute">cursor</span>: pointer;
}
<span class="hljs-selector-id">#ul1</span> <span class="hljs-selector-tag">li</span><span class="hljs-selector-class">.active</span> {
<span class="hljs-attribute">border-top</span>: <span class="hljs-number">2px</span> solid <span class="hljs-number">#8B4513</span>;
<span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">2px</span> solid <span class="hljs-number">#FFFFFF</span>;
}
<span class="hljs-selector-id">#tab-list</span> <span class="hljs-selector-tag">div</span> {
<span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#7396B8</span>;
<span class="hljs-attribute">border-top</span>: none;
}
<span class="hljs-selector-id">#tab-list</span> <span class="hljs-selector-tag">div</span> <span class="hljs-selector-tag">li</span> {
<span class="hljs-attribute">height</span>: <span class="hljs-number">30px</span>;
<span class="hljs-attribute">line-height</span>: <span class="hljs-number">30px</span>;
<span class="hljs-attribute">text-indent</span>: <span class="hljs-number">8px</span>;
}
<span class="hljs-selector-class">.show</span> {
<span class="hljs-attribute">display</span>: block;
}
<span class="hljs-selector-class">.hide</span> {
<span class="hljs-attribute">display</span>: none;
}
</span><span class="hljs-tag"></<span class="hljs-name">style</span>></span>
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-comment"><!-- HTML页面布局 --></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"tab-list"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"ul1"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>></span>Vja用户<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"><<span class="hljs-name">li</span>></span>Var用户<span class="hljs-tag"></<span class="hljs-name">li</span>></span>
<span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hide"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hide"</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript">
<span class="hljs-comment">// JS实现选项卡切换</span>
<span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">var</span> oUl1 = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"ul1"</span>);
<span class="hljs-keyword">var</span> aLi = oUl1.<span class="hljs-title function_">getElementsByTagName</span>(<span class="hljs-string">"li"</span>);
<span class="hljs-keyword">var</span> oDiv = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"tab-list"</span>);
<span class="hljs-keyword">var</span> aDiv = oDiv.<span class="hljs-title function_">getElementsByTagName</span>(<span class="hljs-string">"div"</span>);
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i < aLi.<span class="hljs-property">length</span>; i++) {
aLi[i].<span class="hljs-property">index</span> = i;
aLi[i].<span class="hljs-property">onmouseover</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i < aLi.<span class="hljs-property">length</span>; i++) {
aLi[i].<span class="hljs-property">className</span> = <span class="hljs-string">""</span>;
}
<span class="hljs-variable language_">this</span>.<span class="hljs-property">className</span> = <span class="hljs-string">"active"</span>;
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> j = <span class="hljs-number">0</span>; j < aDiv.<span class="hljs-property">length</span>; j++) {
aDiv[j].<span class="hljs-property">className</span> = <span class="hljs-string">"hide"</span>;
}
aDiv[<span class="hljs-variable language_">this</span>.<span class="hljs-property">index</span>].<span class="hljs-property">className</span> = <span class="hljs-string">"show"</span>;
}
}
}
</span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>
这是运行效果