局部跳转跳转功能的实现

最新推荐文章于 2024-06-28 10:17:09 发布

易文Ev

最新推荐文章于 2024-06-28 10:17:09 发布

阅读量805

点赞数

分类专栏：不同效果的代码

本文链接：https://blog.csdn.net/m0_51766302/article/details/119297799

版权

前段时间因为需要在网上查了很多关于局部跳转功能的方法，没有用到太多框架，都是比较基础简单的方法，能出效果。

可以配合不同的按钮特效来完成不同的跳转效果。

第一种：

<!DOCTYPE html>
<html>
<head>
    <meta charset="gb2312" />
    <title>无标题文档</title>
    <style>
        body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
        ul,li{list-style:none;}
        .wrap{width:500px; margin:20px auto;}
        .hide{display:none;}
        #tab_t{height:25px;border-bottom:1px solid #ccc;}
        #tab_t li{
            float:left;
            width:80px;
            height:24px;
            line-height:24px;
            margin:0 4px;
            text-align:center;
            border:1px solid #ccc;
            border-bottom:none;
            background:#f5f5f5;
            cursor:pointer}
        #tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
        #tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
        #tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
    </style>
</head>

<body>

<div class="wrap">

    <div id="tab_t">
        <ul>
            <li><input type="radio" class="act">自动配置</li>
            <li><input type="radio">手动配置</li>
        </ul>
        </div>
    <div id="tab_c">
        <div>
            <input type="text" placeholder="DNS1" class="net_text" disabled style="font-size: 19px;width: 300px;height: 40px">&nbsp;&nbsp;必填<br>
            <input type="text" placeholder="DNS2" class="net_text" disabled style="font-size: 19px;width: 300px;height: 40px;margin-top: 10px"></div>
        <div class="hide" ><input type="text" placeholder="DNS1" class="net_text" style="font-size: 19px;width: 300px;height: 40px">&nbsp;&nbsp;必填<br>
            <input type="text" placeholder="DNS2" class="net_text" style="font-size: 19px;width: 300px;height: 40px;margin-top: 10px"></div>

    </div>
</div>

</body>


<script type="text/javascript">
    window.onload=function(){
        var tab_t=document.getElementById('tab_t');
        var tab_t_li=tab_t.getElementsByTagName('li');
        var tab_c=document.getElementById('tab_c');
        var tab_c_li=tab_c.getElementsByTagName('div');
        var len=tab_t_li.length;
        var i=0;
        for(i=0;i<len;i++){
            tab_t_li[i].index=i;
            tab_t_li[i].onclick=function(){
                for(i=0;i<len;i++){
                    tab_t_li[i].className='';
                    tab_c_li[i].className='hide';
                }
                tab_t_li[this.index].className='act';
                tab_c_li[this.index].className='';
            }
        }
    }
</script>
</html>

打开显示样式，有点不对称，但不是我项目里需求的样式，所以没有改

输入框可以输入和输入框不能输入的差别

第二种：

<!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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">

    </style>

</head>

<body>

<ul>
    <li ><a href="#" type="radio" name="sex" id="button1" onclick="show1()"> A</a></li>
    <li><a href="#" type="radio" name="sex" id="button2" onclick="show2()" >B</a></li>
</ul>
<div id="div1">
      <span>
                            <div class="begin act">
                        192.168.10.
                        <input type="text" value=" 100" class="begin_ip">

最低0.47元/天解锁文章

易文Ev

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
局部跳转跳转功能的实现

前段时间因为需要在网上查了很多关于局部跳转功能的方法，没有用到太多框架，都是比较基础简单的方法，能出效果。可以配合不同的按钮特效来完成不同的跳转效果。第一种：<!DOCTYPE html><html><head> <meta charset="gb2312" /> <title>无标题文档</title> <style> body,ul,li{margin:0; pa
复制链接

扫一扫

专栏目录