问题是：js是如何实现鼠标移动到不同栏位切换对应的显示内容的?

最佳答案

给你一个示例代码吧，引用了jQuery框架。你可以将这个js文件下载到本地或直接使用例子中的远程地址（不过由于国内google经常访问不了建议下载下来）

<!DOCTYPE HTML>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        function switchContentBox(obj) {
            obj = $(obj);
            var contentBox = obj.parents('div.box:first').children('div.content');
            var index = obj.attr('item');
            contentBox.children().hide();
            contentBox.children(':eq(' + index + ')').show();
        }
    </script>
</head>
<body>
<div class="box">
    <div class="title">
        <span item="0" onmouseover="switchContentBox(this)">Demo1</span>
        <span item="1" onmouseover="switchContentBox(this)">Demo2</span>
    </div>
    <div class="content">
        <div>Content of Demo1</div>
        <div style="display: none;">Content of Demo2</div>
    </div>
</div>
</body>
</html>