金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > 金沙棋牌官方平台css实现tab菜单切换效果的方法

金沙棋牌官方平台css实现tab菜单切换效果的方法

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-08-31 16:05

js css实现tab菜单切换效果的方法,csstab

本文实例讲述了js css实现tab菜单切换效果的方法。分享给大家供大家参考。具体实现方法如下:

index.css如下:

复制代码 代码如下:

* { 
    margin: 0px; 
    padding: 0px; 

body { 
    width: 600px; 
    margin: 0 auto; 
    background-color: silver; 

 
#contanier { 
    background-color: yellow; 
    width: 600px;height: 400px; 

 
#tabNavi { 
    width: 600px;height: 30px; 
    background-color: #00bfff; 
    text-decoration: none; 
    list-style-type: none; 

 
#tabNavi li { 
    float: left; 
    margin-right: 7px; 
     background-color: #008b8b; 
    color: white; 
    cursor: pointer; 
    width: 60px; 
    height: 28px; 
    line-height: 30px; 
    text-align: center; 

#content { 
    width: 600px;height: 370px; 
    background-color: white; 
}

index.html如下:

复制代码 代码如下:

<金沙棋牌官方平台,!DOCTYPE html> 
<html xmlns="; 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>js实现tab菜单动态切换效果</title> 
    <link href="css/index.css" rel="stylesheet" /> 
    <script type="text/javascript"> 
        function gel(id) { 
            return document.getElementById(id); 
        } 
 
        var arr = [ 
            { "title": "新闻", "content": "这是新闻频道" }, 
            { "title": "财经", "content": "这是财经频道" }, 
            { "title": "娱乐", "content": "这是娱乐频道" }, 
            { "title": "体育", "content": "这是体育频道" }, 
            { "title": "汽车", "content": "这是汽车频道" }, 
            { "title": "视频", "content": "这是视频频道" }, 
            { "title": "生活", "content": "这是生活频道" } 
        ]; 
 
        window.onload = function() { 
            for (var i = 0; i < arr.length; i ) { 
                var liNew = document.createElement("li"); 
                liNew.innerHTML = arr[i].title; 
                gel("tabNavi").appendChild(liNew); 
                //在这些li上面都绑定点击事件,就需要给他们每一个赋一个属性(最好是id) 
                liNew.setAttribute("id", i); 
                 
                liNew.onclick = function () { 
                   var navs = gel("tabNavi").childNodes; 
                    //清除所有颜色 
                   for (var j = 0; j < navs.length; j ) { 
                       if (navs[j].nodeType == 1) { 
                           navs[j].style.backgroundColor ="#008b8b"; 
                       } 
                    } 
 
                    this.style.backgroundColor = "red"; 
                    gel("content").innerHTML = arr[this.id].content; 
                }; 
            } 
        }; 
    </script> 
</head> 
<body> 
    <div id="contanier"> 
        <ul id="tabNavi"></ul> 
        <div id="content" class="content"></div> 
    </div> 
</body> 
</html>

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

本文实例讲述了js css实现tab菜单切换效果的方法。分享给大家供大家参考。具体实现方法如下: i...

本文实例讲述了js css实现tab菜单切换效果的方法。分享给大家供大家参考。具体实现方法如下:

js css实现tab菜单切换效果的方法

 这篇文章主要介绍了js css实现tab菜单切换效果的方法,以实例形式完整讲述了css与js的实现代码,具有一定参考借鉴价值,需要的朋友可以参考下

 

 

本文实例讲述了js css实现tab菜单切换效果的方法。分享给大家供大家参考。具体实现方法如下:

index.css如下:

 

代码如下:

* {
margin: 0px;
padding: 0px;
}
body {
width: 600px;
margin: 0 auto;
background-color: silver;
}

#contanier {
background-color: yellow;
width: 600px;height: 400px;
}

#tabNavi {
width: 600px;height: 30px;
background-color: #00bfff;
text-decoration: none;
list-style-type: none;
}

#tabNavi li {
float: left;
margin-right: 7px;
background-color: #008b8b;
color: white;
cursor: pointer;
width: 60px;
height: 28px;
line-height: 30px;
text-align: center;
}
#content {
width: 600px;height: 370px;
background-color: white;
}

 

index.html如下:

代码如下:

<!DOCTYPE html>
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js实现tab菜单动态切换效果</title>
<link href="css/index.css" rel="stylesheet" />
<script type="text/javascript">
function gel(id) {
return document.getElementById(id);
}

var arr = [
{ "title": "新闻", "content": "这是新闻频道" },
{ "title": "财经", "content": "这是财经频道" },
{ "title": "娱乐", "content": "这是娱乐频道" },
{ "title": "体育", "content": "这是体育频道" },
{ "title": "汽车", "content": "这是汽车频道" },
{ "title": "视频", "content": "这是视频频道" },
{ "title": "生活", "content": "这是生活频道" }
];

window.onload = function() {
for (var i = 0; i < arr.length; i ) {
var liNew = document.createElement("li");
liNew.innerHTML = arr[i].title;
gel("tabNavi").appendChild(liNew);
//在这些li上面都绑定点击事件,就需要给他们每一个赋一个属性(最好是id)
liNew.setAttribute("id", i);

liNew.onclick = function () {
var navs = gel("tabNavi").childNodes;
//清除所有颜色
for (var j = 0; j < navs.length; j ) {
if (navs[j].nodeType == 1) {
navs[j].style.backgroundColor ="#008b8b";
}
}

this.style.backgroundColor = "red";
gel("content").innerHTML = arr[this.id].content;
};
}
};
</script>
</head>
<body>
<div id="contanier">
<ul id="tabNavi"></ul>
<div id="content" class="content"></div>
</div>
</body>
</html>

 

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

这篇文章主要介绍了js css实现tab菜单切换效果的方法,以实例形式完整讲述了css与js的实现代码,具有一定参...

js动态切换图片的方法,js动态切换

本文实例讲述了js动态切换图片的方法。分享给大家供大家参考。具体实现方法如下:

index.css文件如下:

复制代码 代码如下:

* { 
    margin: 0px;padding: 0px; 

 
body { 
    width: 632px; 
    /*background-color: blue;*/ 
    margin: 0 auto; 

 
#imgsCom { 
    background-color: yellow; 
    /*相对定位,为了下层可以使用绝对定位时以本div的原点为原点*/ 
    position: relative; 

 
#ulnav{ 
    list-style-type: none; 
    
    position: absolute; 
    /*使用以imgsCom为原点来绝对定位到右下角*/ 
    bottom: 0px; 
    right: 0px; 

#ulnav li{ 
    list-style-type: none; 
    float: left; 
    background-color: black; 
    color: white; 
    margin-right: 5px; 
    width: 20px; 
    height: 20px; 
    line-height: 20px; 
    text-align: center; 
    cursor: pointer; 
}

index.html如下:

复制代码 代码如下:

<!DOCTYPE html> 
<html xmlns="; 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>js,css动态切换图片</title> 
    <link href="css/index.css" rel="stylesheet" /> 
    <script type="text/javascript"> 
 
        function gel(id) { 
            return document.getElementById(id); 
        } 
 
        function  clearLiBg() { 
            var mylis = gel("ulnav").childNodes; 
            for (var i = 0; i < mylis.length; i ) { 
                if (mylis[i].nodeType == 1) { 
                    mylis[i].style.backgroundColor = "black"; 
                } 
            } 
        } 
       
        window.onload = function() { 
            //给三个li都指定一个属性 
            var lis = gel("ulnav").childNodes; 
            for (var i = 0; i < lis.length; i ) { 
                if (lis[i].nodeType == 1) { 
                    lis[i].onclick = function () { 
                        //更换图片 
                        gel("myimg").setAttribute("src", "images/" this.innerHTML ".png"); 
                        //所有LI颜色复原 
                        clearLiBg(); 
                        //更换LI背景标签颜色 
                        this.style.backgroundColor = "silver"; 
                    }; 
                } 
            } 
        }; 
    </script> 
</head> 
<body> 
    <div id="imgsCom" style="width: 632px; height: 412px;"> 
        <img src="images/1.png" id="myimg" style="width: 632px; height: 412px; " /> 
        <ul id="ulnav"> 
            <li>1</li> 
            <li>2</li> 
            <li>3</li> 
        </ul> 
    </div> 
</body> 
</html>

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

本文实例讲述了js动态切换图片的方法。分享给大家供大家参考。具体实现方法如下: index.css文件如下...

index.css如下:

相关文章

相关搜索:

今天看啥

搜索技术库

返回首页

  • php数组随机排序实现方法
  • IDisposable接口
  • Java与微信不得不说的故事——实现微信公众
  • SVG绘图(二) —— 渲染满天星辰,svg满天
  • 九款酷炫基于jquery实现的应用及源码,九款
  • iOS最新漏洞可实现“以假乱真”的iCloud密码钓

相关频道: HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前端代码  正则表达式  Flex教程  WEB前端教程  

复制代码 代码如下:

帮客评论

* { 
    margin: 0px; 
    padding: 0px; 

body { 
    width: 600px; 
    margin: 0 auto; 
    background-color: silver; 

 
#contanier { 
    background-color: yellow; 
    width: 600px;height: 400px; 

 
#tabNavi { 
    width: 600px;height: 30px; 
    background-color: #00bfff; 
    text-decoration: none; 
    list-style-type: none; 

 
#tabNavi li { 
    float: left; 
    margin-right: 7px; 
     background-color: #008b8b; 
    color: white; 
    cursor: pointer; 
    width: 60px; 
    height: 28px; 
    line-height: 30px; 
    text-align: center; 

#content { 
    width: 600px;height: 370px; 
    background-color: white; 
}

index.html如下:

复制代码 代码如下:

<!DOCTYPE html> 
<html xmlns="; 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>js实现tab菜单动态切换效果</title> 
    <link href="css/index.css" rel="stylesheet" /> 
    <script type="text/javascript"> 
        function gel(id) { 
            return document.getElementById(id); 
        } 
 
        var arr = [ 
            { "title": "新闻", "content": "这是新闻频道" }, 
            { "title": "财经", "content": "这是财经频道" }, 
            { "title": "娱乐", "content": "这是娱乐频道" }, 
            { "title": "体育", "content": "这是体育频道" }, 
            { "title": "汽车", "content": "这是汽车频道" }, 
            { "title": "视频", "content": "这是视频频道" }, 
            { "title": "生活", "content": "这是生活频道" } 
        ]; 
 
        window.onload = function() { 
            for (var i = 0; i < arr.length; i ) { 
                var liNew = document.createElement("li"); 
                liNew.innerHTML = arr[i].title; 
                gel("tabNavi").appendChild(liNew); 
                //在这些li上面都绑定点击事件,就需要给他们每一个赋一个属性(最好是id) 
                liNew.setAttribute("id", i); 
                 
                liNew.onclick = function () { 
                   var navs = gel("tabNavi").childNodes; 
                    //清除所有颜色 
                   for (var j = 0; j < navs.length; j ) { 
                       if (navs[j].nodeType == 1) { 
                           navs[j].style.backgroundColor ="#008b8b"; 
                       } 
                    } 
 
                    this.style.backgroundColor = "red"; 
                    gel("content").innerHTML = arr[this.id].content; 
                }; 
            } 
        }; 
    </script> 
</head> 
<body> 
    <div id="contanier"> 
        <ul id="tabNavi"></ul> 
        <div id="content" class="content"></div> 
    </div> 
</body> 
</html>

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

您可能感兴趣的文章:

  • Div CSS JS树型菜单,可刷新
  • Div Css( Js)菜单代码及制作工具
  • 无js5款纯div css制作的弹出菜单标准
  • JavaScript CSS创建右击菜单效果代码
  • CSS JavaScript 实现菜单功能 改进版
  • JavaScript CSS 菜单功能代码
  • css js下拉菜单
  • 通用的二级菜单代码(css javascript)
  • JS CSS 制作的超级简单的下拉菜单附图
  • js css实现垂直方向自适应的三角提示菜单

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:金沙棋牌官方平台css实现tab菜单切换效果的方法

关键词: