jquery选项卡切换 

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jqr.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jquery</title>
<style type="text/css">
 *{ margin:0; padding:0;}
 body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
 .tab { width:240px;margin:50px;}
 .tab_menu { clear:both;}
 .tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;}
 .tab_menu li.hover { background:#DFDFDF;}
 .tab_menu li.selected { color:#FFF; background:#6D84B4;}
 .tab_box { clear:both; border:1px solid #898989; height:100px;}
 .hide{display:none}
</style>
</head>
<body>

<div class="tab">
    <div class="tab_menu">
        <ul>
            <li class="selected">时事</li>
            <li>体育</li>
            <li>娱乐</li>
        </ul>
    </div>
    <div class="tab_box"> 
         <div>时事</div>
         <div class="hide">体育</div>
         <div class="hide">娱乐</div>
    </div>
</div>
</body>
</html>
$(function(){
    
    $div_li = $("div.tab_menu ul li");
    $div_li.click(function(){
        $(this).addClass("selected").siblings().removeClass("selected");
        //var index=$div_li.index(this);
          var index = $(this).index();
        $("div.tab_box > div").eq(index).show().siblings().hide();
    });
});

 

posted @ 2016-08-31 14:57  公众号java-codestack  阅读(173)  评论(0)  编辑  收藏  举报