jQuery之选项卡的大致达成,jQuery达成tab标签自动切换的法子

By admin in 4858美高梅 on 2019年8月3日

对此怎样修饰html标签,那对于js来说,能够通过setAttribute来安装标签的性质,通过getAttribute来获取标签的性质,而在jq中自然也得以完毕类似的效应,方法上必将比js要简化多了。
一 通过改造标签属性来改造它的体裁
js设置和收获标签的品质

jQuery达成选项卡功效。首先将分界面搭建好。

正文实例叙述了jQuery完结tab标签自动切换的法子。分享给我们供大家参谋。具体落到实处格局如下:

复制代码 代码如下:

有导航头tab_menu,还有内容tab_box。

复制代码 代码如下:

  <script type=”text/javascript”>
window.onload = function () {
var attr = document.getElementById(“attr”);
attr.setAttribute(“style”, “font-weight:bold;”)
alert(attr.getAttribute(“style”));
}
</script>

要贯彻的职能正是,点击后,将相应的剧情展现出来,其他内容遮蔽掉。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>jQuery达成的tab标签自动切换效果</title>
<style type=”text/css”>
* {
 margin:0;
 padding:0;
}
dl {
 margin:10px auto;
 width:500px;
 line-height:24px;
 border-left:1px solid #dcdcdc;
}
dt.active {
 border-bottom:1px solid #fff;
 position:relative;
jQuery之选项卡的大致达成,jQuery达成tab标签自动切换的法子。}
dt {
 padding:0 10px;
 float:left;
 border:1px solid #dcdcdc;
 border-left:0;
 cursor:pointer;
 margin-bottom:-1px;
}
dd {
 clear:both;
 width:100%;
 border-left:0;
 border:1px solid #dcdcdc;
 border-left:0;
 display:none;
}
</style>
</head>
<body>
<dl>
  <dt>nav1</dt>
  <dt>nav2</dt>
  <dt>nav3</dt>
  <dd>1111111111111111111111</dd>
  <dd> 2222222222222222222222</dd>
  <dd>  3333333333333333333333</dd>
</dl>
<script type=”text/javascript”
src=”/html/txdm_2/images/20101004/jquery-1.2.6.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
 $(‘dt:first’).addClass(‘active’);
 $(‘dd:first’).css(‘display’,’block’);
 autoroll();
 hookThumb();
});
var i=-1; //第i+1个tab开始
var offset = 2500; //轮换时间
var timer = null;
function autoroll(){
 n = $(‘dt’).length-1;
 i++;
 if(i > n){
 i = 0;
 }
 slide(i);
    timer = window.setTimeout(autoroll, offset);
 }
function slide(i){
 $(‘dt’).eq(i).addClass(‘active’).siblings().removeClass(‘active’);
 $(‘dd’).eq(i).css(‘display’,’block’).siblings(‘dd’).css(‘display’,’none’);
 }
function hookThumb(){   
 $(‘dt’).hover(
  function () {
    if (timer) {
                clearTimeout(timer);
    i = $(this).prevAll().length;
             slide(i);
            }
  },
  function () {
     
            timer = window.setTimeout(autoroll, offset); 
            this.blur();           
            return false;
  }
);
}
</script>
</body>
</html>

jq设置和获取标签的属性

何况为了表现选中状态,为当选的项增添背景,以示差距。

希望本文所述对大家的javascript程序设计具有扶助。

复制代码 代码如下:

这三遍,小编本身写了代码,先看html部分:

你大概感兴趣的稿子:

  • 最简易纯JavaScript完结Tab标签页切换的艺术(推荐)
  • 纯css+js写的贰个简易的tab标签页带样式
  • js(JavaScript)达成TAB标签切换效果的简要实例
  • 简单的说纯js完成点击切换TAB标签实例
  • js完毕点击切换TAB标签实例
  • JS完毕广大的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
  • js达成的tab标签切换效果代码分享
  • javascript动态增进删减tabs标签的主意
  • jQuery EasyUI API 华语文书档案 –
    Tabs标签页/选项卡
  • jquery tab标签页的创设
  • jquery通过a标签删除table中的一行的代码
  • jQuery EasyUI
    布局之动态增加tabs标签页
  • js与jquery分别达成tab标签页成效的秘籍

<script
src=””
type=”text/javascript”></script>
<script type=”text/javascript”>
$(function () {
$(“#attr”).attr(“style”, “color:#ff0000”);//单个属性的装置
$(“#Avatar”).attr({ “class”: “banner”, “alt”: “头像”, “src”:
“”
});//多少个天性的装置
alert($(“#Avatar”).attr(“src”)); //得到钦定标签的质量
});
</script>

复制代码 代码如下:

值得注意的是JS的window.onload方法块的剧情是在JQ的$(function(){})方法块实践到位后,再实施的。
二 通过改变标签的css样式来改动它的体制
看看基本的语法:

<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>

复制代码 代码如下:

html中,须要三个大的div,里面有多个子div,一个当作导航头tab_menu,贰个看成内容体tab_box。css代码担负布局html内容。

$(“#attr”).addClass(“banner”);//增加样式
$(“#attr”).removeClass(“banner”);//移除样式
                  //JQ支持有关写法,因为removeClass的归来结果也是叁个Jq对象,所以Jq对象的享有办法和事件它都足以应用
$(“#attr”).removeClass(“banner”).addClass(“bannerOver”);

css部分:

上边是三个事例,当在dd标签上单击时,将眼下dd块实行高亮展现

复制代码 代码如下:

复制代码 代码如下:

*{
margin:0;
padding:0;
}
.tab{
    width:240px;
    margin:50px;
    /*border:1px solid;*/
}
.tab_4858美高梅 ,menu{
    clear:both;
}
.tab_menu li{
    float:left;  //将导航头左飘
    text-align:center;  //将文字居中
    list-style:none;  //去除标志符号
    background:#F1F1F1; //设置暗中同意背景象
    border:1px solid #898989; //设置边框色
    margin-right:4px; //各类li之间的离开为4px
    cursor:pointer;  //鼠标浮上从此,会有小手的标记出现
    padding:1px 6px; //调整li的在那之中中距离
    border-bottom:none;

<style>
.banner { background: #0094ff; }
.bannerOver { background: #808080; }
.cur { background: #ff6a00; }
</style>
<script>
$(function () {
$(‘#menu_title’).find(‘dd’).click(function () {
$(‘#menu_title’).find(‘dd’).removeClass(‘cur’);
$(this).addClass(‘cur’);
})
})
</script>
<dl id=”menu_title”>
<dt>人</dt>
<dd>一种尖端动物</dd>
<dt>狗</dt>
<dd>人类的意中人</dd>
<dt>猫</dt>
<dd>猫科动物的祖辈</dd>
</dl>

}
.tab_menu li.hover{
    background:#DFDFDF;
}
.tab_menu li.selected{//为选中的选项加背景与颜色
    color:#FFF;
    background:#6D84B4;
}
.tab_box{
    clear:both; //清楚float效果的熏陶
    height:100px; //设置高度为100px
    border:1px solid #898989; //设置内容体的边框样式
}
.hide{//遮蔽必要遮掩的剧情div
    display:none;
}

上面是为表格的隔行变色效果

待布局造成之后,实行jQuery的动作:

复制代码 代码如下:

复制代码 代码如下:

.odd { background: #808080; }
.even { background: #ffd800; }
.selected { background: #0094ff; color: #fff; }     .hover {
background: #808080; }

<script type=’text/javascript’>
$(function(){
   
//1.点击时改造css属性,移除从前的selected选项,加多新的selected选项
    //2.隐蔽在此以前的div层,展现对应得div层
    //为导航中的li注册点击事件
    var $div_li = $(“.tab_menu ul li”);
    $div_li.click(function(){
       
$(this).addClass(‘selected’).siblings().removeClass(‘selected’);
        //var index = $div_li.index(this);
        //$(“div.tab_box >
div”).eq(index).show().siblings().hide();
        var text = $(this).text();
        if(text==’时事’)
        {
            $(‘.tab_box
div:contains(“时事”)’).removeClass(‘hide’).siblings().addClass(‘hide’);
        }
        if(text==’体育’)
        {
            $(‘.tab_box
div:contains(“体育”)’).removeClass(‘hide’).siblings().addClass(‘hide’);
        }
        if(text==’娱乐’)
        {
            $(‘.tab_box
div:contains(“娱乐”)’).removeClass(‘hide’).siblings().addClass(‘hide’);
        }
    }).hover(function(){
            $(this).addClass(“hover”);
        },function(){
            $(this).removeClass(“hover”);
        });
});
</script>

复制代码 代码如下:

那是自身写的jQuery代码,笔者的思路是,点击选项卡时,增多selected样式,同期移除兄弟选项卡的selected样式。

var $trs = $(“#menu_title>dd”); //选用全部行
$trs.filter(“:odd”).addClass(“odd”); //给奇数行加多odd样式
$trs.filter(“:even”).addClass(“even”); //给偶数行增多odd样式

再七个,怎么着能力接触相应的tab_box中的内容的躲藏与呈现呢?

单击行后,让眼下行高亮彰显

自己发掘了他们有相对应的原委,正是选项头为“实事”的呼应的选项体也为“实事”,选项头为“体育”的相应的选项提也为“体育”等。

复制代码 代码如下:

自个儿就想,先获取选项头的剧情,做出决断,当它为分化的值时,就接触区别的效果与利益。

//点击行,增加变色样式
$trs.click(function(e) {
$(this).addClass(“selected”)
         .siblings()         .removeClass(“selected”);
})

成效是贯彻了,但是漏洞很显眼,因为并非享有的选项卡都是标题与内容体相对应。

增添鼠标移入与移出事件

再看看上边包车型客车代码:

复制代码 代码如下:

复制代码 代码如下:

       // 鼠标移入 与移出
$(“#menu_title>dd”).hover(
function () {
$(this).addClass(“hover”);
},
function () {
$(this).removeClass(“hover”);
}
);

<script type=”text/javascript” >
//<![CDATA[
    $(function(){
        var $div_li =$(“div.tab_menu ul li”);
        $div_li.click(function(){
            $(this).addClass(“selected”)           
//当前<li>元素高亮
                   .siblings().removeClass(“selected”); 
//去掉别的同辈<li>元素的高亮
            var index =  $div_li.index(this);  //
获取当前点击的<li>成分 在 全体li成分中的索引。
            $(“div.tab_box > div”)      
//采纳子节点。不选用子节点的话,会唤起错误。借使内部还大概有div
                    .eq(index).show()   //展现<li>成分对应的<div>元素
                    .siblings().hide();
//隐敝别的多少个同辈的<div>元素
        })
    })
//]]>
</script>

恩,好了对于标签的样式调控那块内容就讲到这里呢,谢谢您的阅读!

此间的管理就特意的奇妙,它通过获得li的目录,对选项体实行管理。它玄妙的应用了叁个潜藏的关照关系,便是索引值。

您只怕感兴趣的稿子:

  • JQuery达成样式设置、追加、移除与切换的艺术
  • jQuery使用CSS()方法给钦点成分同有时候设置多个样式
  • jQuery使用之设置成分样式用法实例
  • 浅析JQuery UI
    Dialog的样式设置难点
  • JQuery设置文本框和密码框获得难点时的体裁
  • JQuery扩充插件Validate—4设置错误提醒的体裁
  • jQuery toggle()设置CSS样式
  • jquery
    怎么样动态增加、删除class样式方法介绍
  • JQuery中操作Css样式的主意
  • jQuery实现为LI列表前3行设置样式的措施【2种办法】

如此即使选项头与选项体内容不对应,同样能够兑现联合浮动作效果应。

经过此番演练,作者以为,本人先动脑子想一想还是很好的。可以窥见思路的差异,能力够察觉不足,知道差别。有的时候候乃至你的笔触会更加好呢!

你恐怕感兴趣的稿子:

  • 基于JQuery的6个Tab选项卡插件
  • jQuery EasyUI API 中文文书档案 –
    Tabs标签页/选项卡
  • jquery tools之tabs
    选项卡/页签
  • jQuery达成选项卡切换效果简单演示
  • JQuery
    Tab选项卡效果代码立异版
  • JQuery
    选项卡效果(JS与HTML的分别)
  • jQuery EasyUI Tab
    选项卡难题总计
  • jQuery完成的Tab滑动选项卡及图片切换(八种功力)小结
  • js/jQuery轻易贯彻选项卡成效
  • jquery插件开辟之选项卡制作详解

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有