如何使我的链接在我的HTML代码中可点击？
[英]How to make my links clickable in my html code?
问题描述
抱歉，但我只想问一下，我开发了一个卡路里计数器来为用户建议饮食习惯，我希望在用户计算出BMI之后使该建议出现，以便他们可以点击
例如，我可以单击图片中红色句子的建议，这样它将链接到我的下一个html页面
下面是我的代码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Diet Suggestion </title> <!-- BOOTSTRAP STYLES--> <link href="assets/css/bootstrap.css" rel="stylesheet" /> <!-- FONTAWESOME STYLES--> <link href="assets/css/font-awesome.css" rel="stylesheet" /> <!-- CUSTOM STYLES--> <link href="assets/css/custom.css" rel="stylesheet" /> <!-- GOOGLE FONTS--> <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' /> <style> body { background-image: url("background.jpg "); } table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } tr:nth-child(even){background-color: #f2f2f2} th { background-color: #4CAF50; color: white; } </style> </head> <body> <tr> <td> <div class="main_view" style="color:#FFF;text-align:center"> <a href="#" target="_blank"> <center> <img src="banner.jpg" style="width:100%; height:160px;" alt="satisfaction_2015" border="none" </center> </a> </div> </td> </tr> </nav> <!-- /. NAV TOP --> <nav class="navbar-default navbar-side" role="navigation"> <div class="sidebar-collapse"> <ul class="nav" id="main-menu"> <li class="text-center"> <img src="assets/img/find_user.png" class="user-image img-responsive"/> </li> <li> <a href="index.html"><i class="fa fa-dashboard fa-3x"></i> Home</a> </li> <li> <a href="diet_suggest.html"><i class="fa fa-qrcode fa-3x"></i>Diet Suggestion </a> </li> <li> <a href="today.html"><i class="fa fa-qrcode fa-3x"></i>Today's Menu </a> </li> <li> <a href="exercise.html"><i class="fa fa-desktop fa-3x"></i>Your Exercise </a> </li> <li> <a href="calorie_counter.html"><i class="fa fa-desktop fa-3x"></i>Calorie Counter</a> </li> <li> <a href="sugar.html"><i class="fa fa-desktop fa-3x"></i>Sugar Counter</a> </li> <li> <a href="food_list.php"><i class="fa fa-desktop fa-3x"></i>Malaysian's Food Calories</a> </li> <li > <a href="logoutproc.php"><i class="fa fa-square-o fa-3x"></i>Logout</a> </li> </div> </nav> <!-- /. NAV SIDE --> <div id="page-wrapper" > <div id="page-inner"> <div class="row"> <div class="col-md-35"> <body bgcolor="#b5dcb3"> <p align="right"><iframe scrolling="no" frameborder="no" clocktype="html5" style="overflow:hidden;border:0;margin:0;padding:0;width:240px;height:25px;"src="http://www.clocklink.com/html5embed.php? clock=018&timezone=local&color=blue&size=240&Title=&Message=&Target=&From=2016,1,1,0,0,0&DateFormat=yyyy / mm / dd DDD&TimeFormat=hh:mm:ss TT&Color=blue"></iframe> </p> <font face="Lucida Calligraphy" size="6" ><b><h4><marquee behavior="scroll" direction="left"> <script> /* RAINBOW TEXT Script by Matt Hedgecoe (c) 2002 Featured on JavaScript Kit For this script, visit http://www.javascriptkit.com */ // ********** MAKE YOUR CHANGES HERE var text="Shake it Off" // YOUR TEXT var speed=50 // SPEED OF FADE // ********** LEAVE THE NEXT BIT ALONE! if (document.all||document.getElementById){ document.write('<span id="highlight">' + text + '</span>') var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight } else document.write(text) var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0") var r=1 var g=1 var b=1 var seq=1 function changetext(){ rainbow="#"+hex[r]+hex[g]+hex[b] storetext.style.color=rainbow } function change(){ if (seq==6){ b-- if (b==0) seq=1 } if (seq==5){ r++ if (r==12) seq=6 } if (seq==4){ g-- if (g==0) seq=5 } if (seq==3){ b++ if (b==12) seq=4 } if (seq==2){ r-- if (r==0) seq=3 } if (seq==1){ g++ if (g==12) seq=2 } changetext() } function starteffect(){ if (document.all||document.getElementById) flash=setInterval("change()",speed) } starteffect() </script> </b></marquee></font><br> </div> </div> <!-- /. ROW --> <hr /> <title>BMI Calculator </title> <script type="text/javascript"> function computeBMI() { //Obtain user inputs var height=Number(document.getElementById("height").value); var heightunits=document.getElementById("heightunits").value; var weight=Number(document.getElementById("weight").value); var weightunits=document.getElementById("weightunits").value; //Convert all units to metric if (heightunits=="inches") height/=39.3700787; if (weightunits=="lb") weight/=2.20462; //Perform calculation var BMI=weight/Math.pow(height,2); //Display result of calculation document.getElementById("output").innerText=Math.round(BMI*100)/100; var output = Math.round(BMI*100)/100 if (output<18.5) document.getElementById("comment").innerText = "Underweight: Suggesting 7 days Weight Gain"; else if (output>=18.5 && output<=25) document.getElementById("comment").innerText = "Normal: Suggesting Macrobiotic Diet"; else if (output>=25 && output<=30) document.getElementById("comment").innerText = "Obese: Suggesting Low Carbs Diet"; else if (output>30) document.getElementById("comment").innerText = "Overweight: Suggesting Grapefruit Diet"; // document.getElementById("answer").value = output; } </script> <body> <h1>Body Mass Index Calculator</h1> <p>Enter your height: <input type="text" id="height"/> <select type="multiple" id="heightunits"> <option value="metres" selected="selected">metres</option> <option value="inches">inches</option> </select> </p> <p>Enter your weight: <input type="text" id="weight"/> <select type="multiple" id="weightunits"> <option value="kg" selected="selected">kilograms</option> <option value="lb">pounds</option> </select> </p> <input type="submit" value="computeBMI" onclick="computeBMI();"> <h1>Your BMI is: <span id="output">?</span></h1> <h2>This means you are: <span id="comment"> ?</span> </h2> <br> <br> </div> </body> </div> <!-- /. PAGE INNER --> </div> <!-- /. PAGE WRAPPER --> </div> <!-- /. WRAPPER --> <!-- SCRIPTS -AT THE BOTOM TO REDUCE THE LOAD TIME--> <!-- JQUERY SCRIPTS --> <script src="assets/js/jquery-1.10.2.js"></script> <!-- BOOTSTRAP SCRIPTS --> <script src="assets/js/bootstrap.min.js"></script> <!-- METISMENU SCRIPTS --> <script src="assets/js/jquery.metisMenu.js"></script> <!-- CUSTOM SCRIPTS --> <script src="assets/js/custom.js"></script> <div id="disclaimer"> <div id="hiaskaki" style="padding:5px 3px;;color:#FFF;text-align:center;font-size:12px;" > </div><!--disclaimer--> </div><!--main2--> </div><!--div4all--> </body> </html>
2 个解决方案
解决方案1
4 已采纳 2017-01-11 13:50:31
为什么不改变
<span id="comment"> ?</span>
至...
<a href="" id="comment"> ?</a>
带有指向下一页的静态链接，还是根据您的需要通过JS动态设置？
这是一个使用代码片段的JSFiddle示例。 https://jsfiddle.net/JokerDan/chgeprsj/
解决方案2
0 2017-01-11 13:55:59
我建议更改这些行document.getElementById("comment").innerText
到document.getElementById("comment").innerHtml ，然后将您的建议文本包装在锚标签中<a href=#>Underweight: Suggesting 7 days Weight Gain</a>
如何以使链接可点击的方式安全地将文本转换为 html 代码？
[英]How to safely convert text to html code in a way that makes links clickable?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.