JQ简单的选项卡

$(function(){

$(".nav dd").click(function(){           $(‘.nav dd‘).eq($(this).index()).addClass("active").siblings().removeClass("active");

$(".div1 ul li").hide().eq($(this).index()).show();

})

})

<div class="nav">
   <dl>
    <dd class="active">1</dd>
    <dd>2</dd>
    <dd>3</dd>
   </dl>
  </div>
  
  <div class="div1">
   <ul>
    <li><img src="img/1.jpg"/></li>
    <li><img src="img/2.jpg"/></li>
    <li><img src="img/3.jpg"/></li>
   </ul>
  </div>

div,body,ul,li,img,dd,dl{
 margin:0;
 padding:0;
}
.nav{
    width:100px;
    height:14px;
    position:absolute;
    bottom:10px;
    right:20px;
    z-index: 10000;
    left: 50%;
    margin-left: -50px
}
.nav dl dd{
 list-style-type:none;
 width:12px;
 height:12px;
 float:left;
 margin-right:5px;
 cursor:pointer;
    border:1px solid #fff;
}
.nav dl .bg{
 background:#ff7300;
 width:14px;
 height:14px;
 border:none;
}
.nav dl dd.active{
 background:red;
 color:red;
}
.div1{
 height:672px;
 position: relative;
}
ul{
 width:100%;
 height:672px;
 position:relative;
}
ul li{
 list-style:none;
 position:absolute;
 width:100%;
 height:672px;
}
ul li img{
 width:100%;
 height:672px;
}
ul li:first-child{
 z-index: 999;
}
ul li:nth-child(2){
 z-index:888;
}
ul li:last-child{
 z-index:111;
}

时间: 2024-11-05 20:26:15

JQ简单的选项卡的相关文章

【Css】一个简单的选项卡

这次来做一个简单的选项卡. 选项卡其实就分3个部分:html代码,用于显示的内容:css代码,用于显示的样式:javascript代码,用于点击事件. 老规矩,先写一个html坯子. 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4

Javascript实现简单的选项卡

在线演示:http://jsfiddle.net/Web_Code/TbPDd/embedded/result/ <!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&

js制作一个简单的选项卡

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简单的选项卡</title> <style type="text/css"> #main{ height: 400px; width: 400px; margin: 20px auto; } #main>div{ height: 300px; width: 3

三行Jquery代码实现简单的选项卡

今晚,我们来用实现一个简单的选项卡切换代码,主要代码只有两行. 效果: 思路:通过切换JQuery控制div的显隐和样式的改变 其中那个一个div显示,其余全隐藏 实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;p

js和jquery实现简单的选项卡

选项卡切换在做网页的时候经常会用到,以往都是用JQ来实现,代码简单易懂,今天用原生的js实现了一下,二者还是有很大不同的,可以对比一下代码来研究一下. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery.

CSS3及JS简单实现选项卡效果(适配手机端和pc端)

想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100%; overflow: hidden; } #bottom_box{ width: 100%; height: 50px; background-color: #eee; display: flex; //这是flex布局,父元素设置为flex,子元素设置几等份就是分成几等份 position:

jQery简单Tab选项卡效果

简单的Tab效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项卡</title> <style type="text/css"> *{ margin: 0; padding: 0; } #box{ margin: 50px auto; width: 600px; height: 500px; } ul l

vue实现一个简单的选项卡

用vue来实现一个小的选项卡切换,比之前要简单.方便很多. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/vue.min.js"></script> <style> button{

JQ 简单动画显示隐藏效果

一.概括 jq的显示隐藏动画总共有: 普通显示隐藏效果主要用了hide.show.toggle 淡入淡出主要用到了fadeIn.fadeOut.fadeToggle 滑动效果主要用了slideDown.slideUp.slideToggle 其中各效果用到的toggle都是其他两个属性的切换 二.实例 普通显示隐藏效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT