js页面刷新后选项不变的Tab菜单

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>js页面刷新后选项不变的Tab菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
*{margin:0;padding:0}
body{font-size:12px;}
ul,li{list-style:none}
#wrap{margin:10px auto}
#header{background:#fff;color:#333;font:bold 16px/38px Georgia,"Times New Roman",Times,serif;border-bottom:2px solid #42A2E6}
#content{border:1px solid #90C5E1;border-top:none;overflow:hidden}
#content .menu{float:left;background:#E8F5FC;height:100%;border-right:1px solid #90C5E1;_overflow:hidden;padding-top:10px}
#content .menu li{line-text-align:right;padding-right:20px;cursor:pointer}
#content .menu li.thisClass{background:#fff;color:#42A2E6;font-weight:bold;border:1px solid #90C5E1;border-left:none;border-right:none;position:relative;z-index:100}
#content .main{float:left;overflow:hidden}
#content .main p{float:left;padding:0 10px;margin-right:1px}
#content .main p.name{}
#content .main p.state{text-align:center;}
#content .main p.version{text-align:center}
#content .main p.modified{text-align:center}
#content .main p.View{text-align:center}
#content .main p.over{color:#C00}
#content .title{line-}
#content .title p{line-font-weight:bold;background:url()}
#content .list p{line-}
#content .main .list{zoom:1;border-bottom:1px solid #eee}
#content .main .hover{width:100%;background:#E8F5FC;cursor:pointer}
#container{float:left;padding:10px}
</style>
<script src="http://www.zzsky.cn/effect/images/20119/jquery-1.5.1.min.js" type="text/javascript"></script> 
<script type="text/javascript">
jQuery.cookie = function(name, value, options) {
    if (typeof value != 'undefined') {
        options = options || {};
        if (value === null) {
            value = '';
            options = $.extend({}, options);
            options.expires = -1;
        }
        var expires = '';
        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
            var date;
            if (typeof options.expires == 'number') {
                date = new Date();
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            } else {
                date = options.expires;
            }
            expires = '; expires=' + date.toUTCString();
        }
        var path = options.path ? '; path=' + (options.path) : '';
        var domain = options.domain ? '; domain=' + (options.domain) : '';
        var secure = options.secure ? '; secure' : '';
        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
    } else {
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
};
</script>
<script type="text/javascript">
$(function(){
	$(".list").mouseover(function(){
		$(this).addClass("hover")
		})
	$(".list").mouseout(function(){
		$(this).removeClass("hover")	
			})
	$(".state:contains('已完成')").addClass("over")		
	})
$(function(){
	$(".menu li").click(function(){
		$(this).addClass("thisClass").siblings().removeClass("thisClass");
		$(".main").eq($(".menu li").index(this)).show().siblings().hide();
		doSetCookie(this);//设置当前选中的MENU ID
	})
});
$(document).ready(function() {//页面加载完成后执行
	
	var id = $.cookie('defMenuId111');//取COOKIE ID
	if(id != null) {//如果存在COOKIE ID
		$(".menu li").removeClass("thisClass");//去掉所有MENU的thisClass
		$("#menu_tab_"+id).addClass("thisClass");//增加COOKIE记录的MENU的选中状态
		$("#container .main").hide();//隐藏所有内容的显示状态
		$("#main_tab_"+id).show();//显示COOKIE的内容
	}
});
function doSetCookie(d){
	var id = $(d).attr("alt");//去ALT属性
	$.cookie('defMenuId111', id, {expires: 120});//设置COOKIES
}
</script>
</head>
<body>
预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。<br>

<div id="wrap">
	<div id="header">UED DEMO</div>
    <div id="content">
    	<div class="menu">
        	<ul>
            	<li id="menu_tab_1" alt="1" class="thisClass">Home Page</li>
                <li id="menu_tab_2" alt="2">VI</li>
                <li id="menu_tab_3" alt="3">团购</li>
               	<li id="menu_tab_4" alt="4">购物车</li>
                <li id="menu_tab_5" alt="5">帮助中心</li>
                <li id="menu_tab_6" alt="6">专题页</li>
            </ul>
        </div>
        <div id="container">
			<div class="main" id="main_tab_1">
			<div class="title"><p class="name">Name(description)</p><p class="version">Version</p><p class="state">State</p><p class="modified">Date modified</p><p class="View">View</p></div>
            <div class="list">
				<p class="name">首页新版980(包含头尾)</p>
				<p class="version">V1.0</p><p class="state">进行中</p>
				<p class="modified">2011-05-20</p>
				<p class="View"><a href="#" target="_blank">View</a></p>
            </div>
        </div>
        <div class="main" id="main_tab_2" style="display:none">
			<div class="title"><p class="name">Name(description)</p><p class="version">Version</p><p class="state">State</p><p class="modified">Date modified</p><p class="View">View</p></div>
            <div class="list">
				<p class="name">VI寻宝页面</p>
				<p class="version">V1.0</p><p class="state">已完成</p>
				<p class="modified">2011-05-20</p>
				<p class="View"><a href="#" target="_blank">View</a></p>
            </div>
            <div class="list">
				<p class="name">VI抢购页面</p>
				<p class="version">V1.0</p><p class="state">已完成</p>
				<p class="modified">2011-05-20</p>
				<p class="View"><a href="#" target="_blank">View</a></p>
            </div>
        </div>
    	<div class="main" id="main_tab_3" style="display:none">
        	<div class="title"><p class="name">Name(description)</p><p class="version">Version</p><p class="state">State</p><p class="modified">Date modified</p><p class="View">View</p></div>            
            <div class="list">
				<p class="name">团购首页调整(内容左右自动对齐，新增留言类型)</p>
				<p class="version">V1.0</p><p class="state">已完成</p>
				<p class="modified">2011-05-20</p>
				<p class="View"><a href="http://10.130.171.197/html/tuan/html/tuan/index_20110511.html" target="_blank">View</a></p>
            </div>
            <div class="list">
				<p class="name">团购评论页面调整(新增留言类型)</p>
				<p class="version">V1.0</p><p class="state">已完成</p>
				<p class="modified">2011-05-20</p>
				<p class="View"><a href="#" target="_blank">View</a></p>
            </div>           
        </div>
        <div class="main" id="main_tab_4" style="display:none">
			<div class="title"><p class="name">Name(description)</p><p class="version">Version</p><p class="state">State</p><p class="modified">Date modified</p><p class="View">View</p></div>
            <div class="list">
				<p class="name">购物车(调整保修显示)</p>
				<p class="version">V1.0</p><p class="state">已完成</p>
				<p class="modified">2011-05-20</p>
				<p class="View"><a href="#" target="_blank">View</a></p>
            </div>
        </div>
        <div class="main" id="main_tab_5" style="display:none">
			<div class="title"><p class="name">Name(description)</p><p class="version">Version</p><p class="state">State</p><p class="modified">Date modified</p><p class="View">View</p></div>
			<div class="list">
				<p class="name">在线客服</p>
				<p class="version">V1.0</p><p class="state">已完成</p>
				<p class="modified">2011-05-19</p>
				<p class="View"><a href="#" target="_blank">View</a></p>
            </div>
        </div>
        <div class="main" id="main_tab_6" style="display:none">
			<div class="title"><p class="name">Name(description)</p><p class="version">Version</p><p class="state">State</p><p class="modified">Date modified</p><p class="View">View</p></div>
			<div class="list">
				<p class="name">注册抽奖活动</p>
				<p class="version">V1.0</p><p class="state">已完成</p>
				<p class="modified">2011-05-19</p>
				<p class="View"><a href="#" target="_blank">View</a></p>
			</div>
			<div class="list">
				<p class="name">注册抽奖活动20110525产品更换</p>
				<p class="version">V2.0</p><p class="state">已完成</p>
				<p class="modified">2011-05-25</p>
				<p class="View"><a href="#" target="_blank">View</a></p>
			</div>
		</div>
	</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

js页面刷新后选项不变的Tab菜单

相关文章

精彩推荐