选项卡案例

最新推荐文章于 2023-07-12 19:16:31 发布

jinshijiaxixi

最新推荐文章于 2023-07-12 19:16:31 发布

阅读量417

点赞数

文章标签： webview html android

本文链接：https://blog.csdn.net/weixin_48427348/article/details/124673671

版权

问题描述：

当鼠标点击不同的新闻标题时，内容框中会出现相应新闻的内容，例如新浪新闻的网页。

主要知识点：

阻止浏览器默认行为:<a href="javascript: ;"></a>

使用for循环，循环给li添加点击事件，

原理：for循环在点击事件执行之前就已经执行完成，所以在for循环中i值会固定了。在此处若要使用i，则给oLi添加自定义属性用来存放oLi下标。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="title">
    <ul>
        <li class="active"><a href="javascript: ;">国内新闻</a></li>
        <li><a href="javascript: ;">国外新闻</a></li>
        <li><a href="javascript: ;">体育新闻</a></li>
    </ul>

<div class="box">
    <div class="dis">国内新闻</div>
    <div>国外新闻</div>
    <div>体育新闻</div>
</div>
</div>
<script>
//获取元素
var oLi = document.getElementsByTagName('li');
var oDiv = document.querySelector('.box').children;
//循环给li添加点击事件
for(var i=0;i<oLi.length;i++){
    //给每个元素自定义一个属性，用来描述下标
    oLi[i].index = i;

    //for循环这是将点击事件复制了3份，所以点击事件执行时，for循环已经执行完成了
    //i的值就固定是3了，所以添加一个自定义属性
    oLi[i].onclick = function(){
        for(var j=0;j<oLi.length;j++){
            //首先清空所有样式
            oLi[j].className="";
            oDiv[j].className="";
        }
        //然后给被点击的添加样式
        this.className = 'active';
        oDiv[this.index].className = 'dis';

    }
}
</script>
</body>
</html>

jinshijiaxixi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选项卡案例

问题描述：当鼠标点击不同的新闻标题时，内容框中会出现相应新闻的内容，例如新浪新闻的网页。主要知识点：阻止浏览器默认行为:<a href="javascript: ;"></a>使用for循环，循环给li添加点击事件，原理：for循环在点击事件执行之前就已经执行完成，所以在for循环中i值会固定了。在此处若要使用i，则给oLi添加自定义属性用来存放oLi下标。<!DOCTYPE html><html lang="en"><
复制链接

扫一扫