table切换

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自己动手做个简单的jquery版table切换,部分注释</title>
<meta name="keywords" content="jQuery切换,table切换,简洁轮换效果,有部分注释" >
<meta name="description" content="jQuery吧,Write Less, Do More,重注前端开发,web前端开发">
<style type="text/css">
body,div,ul,li,a,h1,h2{margin:0;padding:0}/*--使所用到的标签内外边距清零，不推荐使用*{margin:0;padding}--*/
ul,li{list-style-type:none}/*--清除列表格式--*/
body{margin:0 auto;font:12px/1.5 tahoma,arial,\5b8b\4f53;color:#828282;background:#fff}/*--body居中，字体大小行高字体格式颜色，背景--*/
.box{width:200px;height:200px;margin:0 auto;border:1px #ccc solid; }/*--border边框为1个像素灰色的实线边框--*/
.box_title{width:100%;height:30px;float:left;line-height:30px;background:#ccc}/*--宽100%高30px左浮动行高30px背景灰色--*/
.box_title li{width:50px;float:left;cursor:pointer;text-align:center}/*--宽度50px左浮动移动过去出现手形式内容居中--*/
.box_content{width:100%;height:200px;float:left}
.box_content li{width:100%;float:left}
.active{width:50px;height:30px;float:left;display:block;color:#3e3e3e;background:#fff}     
.j2,.j3,.j4{display:none}
</style>
</head>
<body>
<div class="box">
       <ul class="box_title" id="box_title">
        <li id="j1" class="active">1</li>
        <li id="j2">2</li>
        <li id="j3">3</li>
        <li id="j4">4</li>
      </ul>
     <ul class="box_content">
        <li class="j1">1内容</li>
        <li class="j2">2内容</li>
        <li class="j3">3内容</li>
        <li class="j4">4内容</li>
    </ul>
</div>
<!--jqyery.js需要自己下载哦-->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#box_title li").mouseover(function(){                   //移动到#box_title下的li
  $(this).addClass("active").siblings().removeClass();            //移动到当下的li增加样式.active其他的不加并移除样式    
  $("."+$(this).attr("id")).show().siblings().hide();       //获取当前的id属性值与之前的.结合，合成类，显示，其他隐藏
 });
})
</script>
</body>
</html>

时间： 2024-08-26 19:15:01

table切换的相关文章

vue初识 --- table切换

HTML: <div id="box"> <ul> <li v-for="(item,index) in items" v-text="item" @click="clk(index)" @mouseover="clk(index)" @mouseout="clk(0)" class="tab_li"></li> <

JS几种table切换

1.使用className <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <style type="text/css"> * {padding:0; margin:0;} button { background-color: #ccc; width

如何在react中实现一个table切换？

废话不说,直接贴代码,供新手参考 export default class TabComponent extends Component { constructor(props){ super(props); this.state = { }; } render(){ return ( <TabController> <div name="one"> 第一部分 </div> <div name="two"> 第二部分

jquery实例 苑的离去，感觉些许悲伤，保重 --- --- 苑，怨，缘。。。

左侧菜单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>left_menu</title> <style> .menu{ height: 500px; width: 30%; background-color: gainsboro; float: left; } .content{ heig

TP数据访问

重点学习了: 1,ThinkPHP查询数据 2.ThinkPHP添加数据 LianXiController.class.php 1 <?php 2 namespace Home\Controller; 3 use Think\Controller; 4 class LianXiController extends Controller 5 { 6 //添加数据 7 function tj() 8 { 9 10 /* 11 //方法1:(数组) 12 //添加的数组必须为关联数组,key必须为字段

Adnroid Studio使用技巧

官方第一条提示:所有的使用技巧都可以通过Help→Tips of the Day查看. 下面摘抄一些比较有用的技巧: 1.Esc把活动窗口从工具窗口指向编辑窗口.F12把编辑窗口指向上一次活动的工具窗口.如果是用Shift+Esc不仅仅把焦点指向编辑窗口,还会关闭当前活动的工具窗口 2.if.else,try/catch可以使用快捷键Ctrl+Alt+T (Code | Surround With).模板的设置可以在 File | Settings | File and Code Templat

0731am视图 模型

跨控制器调用方法 function DiaoYong(){ 造对象$sc = new \Home\Controller\GoodsController();echo $sc->aa(); 如果在同一个文件夹下,相对路径$sc=new GoodsController();echo $sc->aa(); 快捷方法A创建控制器对象:一般特指控制器$sc=A("Goods");echo $sc->aa(); 同一个Home模块下,跨模块,加上一个模块名$sc=A("

HotSpot运行时概览#2

HotSpot运行时概览#1 解释器 (译者注:解释器.编译器坑太大,翻译太水请见谅:) 当前HotSpot用于执行字节码的解释器是一种基于模板的解释器.虚拟机启动时,InterpreterGenerator会使用TemplateTable中的信息(每一个字节码对应的汇编代码)在内存中生成一个解释器.一个模板描述一个字节码.TemplateTable定义了所有字节码的模板,并提供了访问的方法.非生产标记-XX:+PrintInterpreter可以用来查看VM启动时在内存中生成的模板. 使用模板

TP框架---thinkphp查询和添加数据

查询 <?php namespace Admin\Controller; use Think\Controller; class MainController extends Controller { public function showList() { echo "大苹果商城"; } public function test() { //数据访问 //造模型对象 //$nation = D("Nation");//连接数据库中的Nation表 //查询