HTML5嵌套网址,可以添加自己喜爱的网址,忘记网址时一键式访问

如果你想一键访问自己经常访问的网址，可以自己做一个html5的页面。
那么就只需要几个btn按钮，给予ID，使用嵌套将javascrpit代码放入html网页中，搭建属于自己专属的跳转页面。
不足之处，请多多指教一下，我会改正过来。

代码部分: 使用div将btn按钮包裹,btn添加ID，设置一个圆角样式变得更加美观。

btn里面可以写A标签也可以不写A标签，看个人的爱好，A标签设置隐藏下划线的代码，添加一个嵌套，设置宽高。

JS代码部分: 在function方法中加入btn的ID，然后在将嵌套的ID放入到function中，在写一个跳转的链接把需要的网址粘贴进去。

这里是代码部分：

<html>
<head>
    <meta charset="utf-8">
    <title>发帖端</title><!--html5版-->
    <style>
		.btnys{border-radius: 25px;}//这里设置的是btn圆角样式
		a{text-decoration:none}//去除A标签的下划线
	</style>
</head>
<body>
 <div>
  <div>
   <div style="height: 44px;">
	<button id="CSGR" class="btnys"><a href="javascript:vo(0);" style="color: #000000">CSDN个人博客主页</a></button>
    <button id="CSLT" class="btnys"><a href="javascript:vo(0);" style="color: #000000">CSDN专业技术论坛</a></button>
	<span class="btnys" style="margin-left: 100px;margin:auto;"><b>墨清尘Cc版</b></span>
   </div>
	<iframe id="QianTao" style="display: block;height:700px;width:100%;margin-top:-18px;"></iframe>
 </div>
</div>
<script src="jquery-2.1.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<script>
     //链接至CSDN个人博客
    $(function () {
        $("#CSGR").click(function () {
        	$("#QianTao").attr("src", "https://blog.csdn.net/");
        });
    });
	//链接至CSDN专业技术论坛
    $(function () {
        $("#CSLT").click(function () {
            $("#QianTao").attr("src", "https://bbs.csdn.net/");
        });
    });
</script>
</body>
</html>

Adobe Dreamweaver CC 2017代码图页面
在这里插入图片描述

这是html页面效果图在这里插入图片描述

点击按钮，会直接跳转到设定好的网址
在这里插入图片描述

总结：
添加网址时，先写一个btn，然后在写js代码
当然你懒得话，可以复制一个出来，改一下ID即可。

btn新增前

<button id="CSGR" class="btnys">CSDN个人博客主页</a></button>
<button id="CSLT" class="btnys">CSDN专业技术论坛</a></button>

btn新增后

<button id="CSGR" class="btnys">CSDN个人博客主页</a></button>
<button id="CSLT" class="btnys">CSDN专业技术论坛</a></button>
<button id="YSXZ" class="btnys">CSDN文章演示新增</a></button>

写js代码时在多写一行即可

JS新增前

   <script>
         //链接至CSDN个人博客
        $(function () {
            $("#CSGR").click(function () {
                $("#QianTao").attr("src", "https://blog.csdn.net/");
            });
        });
		//链接至CSDN专业技术论坛
        $(function () {
            $("#CSLT").click(function () {
                $("#QianTao").attr("src", "https://bbs.csdn.net/");
            });
        });
    </script>

JS新增后

   <script>
         //链接至CSDN个人博客
        $(function () {
            $("#CSGR").click(function () {
                $("#QianTao").attr("src", "https://blog.csdn.net/");
            });
        });
		//链接至CSDN专业技术论坛
        $(function () {
            $("#CSLT").click(function () {
                $("#QianTao").attr("src", "https://bbs.csdn.net/");
            });
        });
       //链接至文章演示新增
        $(function () {
            $("#YSXZ").click(function () {
                $("#QianTao").attr("src", "https://blog.csdn.net/home/help.html#level");
            });
        });
    </script>

注意：必须引入jquery-2.1.1.min.js和bootstrap.min.js
这样页面才会跳转，当然你有更好的插件，可以尝试一下更新

久尘网络

发布了29 篇原创文章 · 获赞 51 · 访问量 1万+

私信关注

HTML5嵌套网址,可以添加自己喜爱的网址,忘记网址时一键式访问

猜你喜欢