知识点：Tab选项卡，切换标签，显示对应内容面板，其余面板隐藏。
siblings()：选取同级其他兄弟元素.removeClass()/.attr("class",...)：切换选中样式- 通过自定义name属性关联标签和内容面板ID
原代码用
mousemove鼠标移动触发，一般选项卡改成click点击触发更符合常规网页习惯。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm36.aspx.cs" Inherits="WebApplication1.WebForm36" %>
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="[http://libs.baidu.com/jquery/1.8.3/jquery.min.js](http://libs.baidu.com/jquery/1.8.3/jquery.min.js)"></script>
<style>
ul li {
float: left;
width: 80px;
list-style:none;
padding:4px;
cursor:pointer;
}
.current {
background-color: red;
color:#fff;
}
</style>
<script>
$(function () {
// 改为click点击事件（原版是mousemove鼠标移动）
$("ul>li").click(function () {
$(this).attr("class", "current").siblings().removeClass("current");
var id = $(this).attr("name");
$("#"+id).show().siblings("div").hide();
});
});
</script>
</head>
<body>
<div>
<div style="overflow: hidden;">
<ul>
<li name="tabpage1">最新图片</li>
<li name="tabpage2">最新主题</li>
<li name="tabpage3">最新回复</li>
</ul>
</div>
<div style="clear:both;padding:10px;border:1px solid #ccc;">
<div id="tabpage1">
<img src="[https://picsum.photos/id/237/200/150](https://picsum.photos/id/237/200/150)" width="200" />
</div>
<div id="tabpage2" style="display: none">
<p>主题1</p>
<p>主题2</p>
<p>主题3</p>
<p>主题4</p>
</div>
<div id="tabpage3" style="display: none">
<p>回复1</p>
<p>回复2</p>
<p>回复3</p>
<p>回复4</p>
</div>
</div>
</div>
</body>
</html>
Code language: HTML, XML (xml)说明：
- 点击li标签，给当前标签加上红色选中样式，其他标签清除样式
- 获取li的name值，找到对应id的内容面板，显示；其他同级内容面板隐藏
- 优化：替换图片地址为在线可访问图片，增加清除浮动、边框美化。
Previous: 菜单展开效果
Next: jqzoom和Validate、Cookie