有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

html选项卡(JavaScript实现方式)

javascript 炮渣日记 2周前 (11-19) 17次浏览 已收录 0个评论 扫描二维码

选项卡制作,网页加载后选项卡效果图如图1,当鼠标指针指向某个选项卡时效果图如图1、图2、图3所示。

html选项卡(JavaScript实现方式)

图1

html选项卡(JavaScript实现方式)

图2

html选项卡(JavaScript实现方式)

图3

解析:

基础页面写好后,通过监听选项卡的 mouseover 事件,动态改变选项卡的样式和图片的样式。

具体步骤:

基础HTML和CSS代码:

HTML代码如下

<div class="tab">
    <ul>
        <li>Tab1</li>
        <li>Tab2</li>
        <li>Tab3</li>
    </ul>
    <ol>
        <li><img src="images/bg2.jpg" width="450" /></li>
        <li><img src="images/bg3.jpg" width="450" /></li>
        <li><img src="images/bg4.jpg" width="450" /></li>
    </ol>
</div>

CSS代码如下

.tab ul, .tab ol {  
    list-style:none;
    margin:0;
    padding:0;
}
.tab ul {
    height:26px;
    width:500px;
}

.tab ol {
    height:auto;
    width:500px;
    padding:6px;
    background:#1B8DD6;
}
.tab ul li {
    float:left;
    height:24px;
    padding:0 1em;
    cursor:pointer;
}

.normal {
    color:#1f3a87;
    background:#fff;
    border:2px solid #1B8DD6;
    border-bottom:0;
}
.hover {
    color:#fff;
    font-weight:bold;
    background:#1B8DD6;
    border:2px solid #1B8DD6;
    border-bottom:0;
}
.show { display:block; }
.none { display:none; }

JS代码

JavaScript代码和注释如下所示。基本思路是,先设置所有元素的样式,再设置选中的元素的样式。

// 获取ul 和 ol元素
var $uli = $(".tab ul li");
var $oli = $(".tab ol li");

// 这两句,将第一个ul元素样式改为hover,将其他元素样式改为normal
$uli.addClass("normal");
$uli[0].className = "hover";

// 这两句话,显示第一张图片,隐藏其他图片
$oli.addClass("none");
$oli[0].className = "show";

// 使用jQuery的each()方法进行遍历,参数是个回调函数,
// 回调函数设置一个形参,就是选中元素的索引
$uli.each(function(i){、
  // 监听 mouseover事件
  $(this).mouseover(function(){
    // 将选中的标签样式改为hover, 其他事normal
    $uli.removeClass().addClass("normal");
    $(this).removeClass().addClass("hover");
    
    // 显示对应的图片
    $oli.removeClass().addClass("none");
    $($oli[i]).removeClass().addClass("show");
  })   
})

完工。

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址