一种鼠标经过选项执行切换的特效

来源：互联网发布：c语言数组乘法表编辑：程序博客网时间：2024/05/01 08:17

在最近帮人改网站时，遇到了这种问题。场景描述如下：
这里写图片描述

页面初始化时，左侧第一栏“长江学者”要处于选中状态【字体颜色改变，右侧显示该栏目的内容】；
鼠标到左侧其他选项时，选项文字颜色发生变化，右侧内容跟着改变，同时上次选中的选项恢复原状；
同时，切换时要有这种效果：切换后，鼠标移开，状态保留在最后一次切换时的状态

解决思路
鼠标浮动时出来右侧内容，最先的想法肯定是用css的hover设置一下样式。但是细想这种肯定不能解决问题。因为hover只有鼠标悬浮于上才能显示，鼠标移开右侧内容就没有了。
那么用JS解决方法如下：

页面初始设置：第一个选项颜色改变，第一个选项的相关内容显示；
设置一个变量flag保存当前选中的选项；
切换时，将flag指向的选项恢复原状，flag指向新的选项，新的选项显示。
重点便在于设置一个变量记录当前选中的选项
示例代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><style>    #main{width:300px;}    #right,#left{width:148px;float:left;border:1px solid #ddd;}    li{list-style:none;font-size:18px;margin-top:10px;cursor:pointer;}    #left li:first-child{color:red}    .right{display:none;}    .right:first-child{display:block}</style><script>    var currentNode = "content1";    var changeContent = function(obj){        //之前的选项恢复原状        document.getElementById(currentNode).style.color="black";        document.getElementById("about"+currentNode).style.display = "none";        //currentNode指向新的节点        currentNode = obj.getAttribute("id");        //设置新的选项        document.getElementById(currentNode).style.color="red";        document.getElementById("about"+currentNode).style.display = "block";    }</script><body><div id="main">    <h1>选项卡切换示例</h1>    <div id="left">           <ul>               <li id="content1" onmouseover="changeContent(this)">杰青</li>               <li id="content2" onmouseover="changeContent(this)">教授</li>               <li id="content3" onmouseover="changeContent(this)">讲师</li>               <li id="content4" onmouseover="changeContent(this)">长江学者</li>           </ul>    </div>    <div id="right">        <div id="aboutcontent1" class="right">             <ul>                 <li>杰青1</li>                 <li>杰青2</li>                 <li>杰青3</li>                 <li>杰青4</li>             </ul>        </div>        <div id="aboutcontent2" class="right">            <ul>                <li>教授1</li>                <li>教授2</li>                <li>教授3</li>                <li>教授4</li>            </ul>        </div>        <div id="aboutcontent3" class="right">            <ul>            <li>讲师1</li>            <li>讲师2</li>            <li>讲师3</li>            <li>讲师4</li>            </ul>        </div>        <div id="aboutcontent4" class="right">              <ul>                  <li>长江学者1</li>                  <li>长江学者2</li>                  <li>长江学者3</li>                  <li>长江学者4</li>              </ul>        </div>    </div></div></body></html>

效果图：
这里写图片描述

0 0