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

最新推荐文章于 2022-01-13 14:24:08 发布

会开花的树-

最新推荐文章于 2022-01-13 14:24:08 发布

阅读量1.9k

点赞数

分类专栏： javascript 文章标签： css javascript

本文链接：https://blog.csdn.net/u013830811/article/details/50371425

版权

javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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

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

解决思路
鼠标浮动时出来右侧内容，最先的想法肯定是用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>