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代码图页面
HTML5嵌套网址,可以添加自己喜爱的网址,忘记网址时一键式访问_第1张图片

 这是html页面效果图HTML5嵌套网址,可以添加自己喜爱的网址,忘记网址时一键式访问_第2张图片

 点击按钮,会直接跳转到设定好的网址
HTML5嵌套网址,可以添加自己喜爱的网址,忘记网址时一键式访问_第3张图片


 总结:
  添加网址时,先写一个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
 这样页面才会跳转,当然你有更好的插件,可以尝试一下更新

你可能感兴趣的:(HTML5嵌套网址,可以添加自己喜爱的网址,忘记网址时一键式访问)