首页 \ 问答 \ 使用列表jQueryUI的片（II）标签(Jquery Tabs using the list (li) tag)

使用列表jQueryUI的片（II）标签(Jquery Tabs using the list (li) tag)

 谁能告诉我怎样才能使用的，而不是使用一个href属性来定义JavaScript和HTML标签1个L1标签？ 
 

 任何帮助，将不胜感激 
 

<!doctype html> <html lang="en">
<head>  
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />  
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>  
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>  
<link rel="stylesheet" href="/resources/demos/style.css" />  
<script>  
$(function() {    
$( "#tabs" ).tabs();  
});  
</script>
</head>
<body> 


<div id="tabs">
  <ul>
  <li><a href="#tabs-1">Nunc tincidunt</a></li>   
  <li><a href="#tabs-2">Proin dolor</a></li>    
  <li><a href="#tabs-3">Aenean lacinia</a></li>  
  </ul>  
  <div id="tabs-1">    
  <p> hendrerit.</p>  
  </div>
    <div id="tabs-2">    
  <p> hendrerit.</p>  
  </div>
    <div id="tabs-3">    
  <p> hendrerit.</p>  
  </div>
  </div></div>  
  </body></html>


Can anyone tell me how I can use li tag instead of using the a href attribute to define the tabs in the javascript and html? 
 

Any help would be appreciated
 

<!doctype html> <html lang="en">
<head>  
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />  
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>  
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>  
<link rel="stylesheet" href="/resources/demos/style.css" />  
<script>  
$(function() {    
$( "#tabs" ).tabs();  
});  
</script>
</head>
<body> 


<div id="tabs">
  <ul>
  <li><a href="#tabs-1">Nunc tincidunt</a></li>   
  <li><a href="#tabs-2">Proin dolor</a></li>    
  <li><a href="#tabs-3">Aenean lacinia</a></li>  
  </ul>  
  <div id="tabs-1">    
  <p> hendrerit.</p>  
  </div>
    <div id="tabs-2">    
  <p> hendrerit.</p>  
  </div>
    <div id="tabs-3">    
  <p> hendrerit.</p>  
  </div>
  </div></div>  
  </body></html>


原文：https://stackoverflow.com/questions/16421010
更新时间：2024-01-22 10:01

最满意答案

<!DOCTYPE html>
<html>
<body>

<div class="container-fluid">
    <header>
        <h1>Business Registration Address Setup</h1>
    </header>

    <label>number 1</label>
    <input type="text" name="number1" id="number1" placeholder="enter single digit number"> <br>
    +<br>
    <label>number 2</label>
    <input type="text" name="number2" id="number2" placeholder="enter single digit number"><br>
    <button type="button" class="btn btn-info" onclick="submit1()">submit</button><br><br>
    <div class="screen" id="screen1"></div>


</div> <!-- End Container-->


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$( document ).ready(function() {

});
function submit1(){
    var a =  document.getElementById("number1").value;
    var b =  document.getElementById("number2").value;
    var c = parseInt(a) + parseInt(b); 
    document.getElementById("screen1").innerHTML=c;
  }
</script>

</body>
</html>

 

 编辑 
 

document.getElementByID  -------> document.getElementById
var c=a+b ----------------------> var c = parseInt(a) + parseInt(b)
button type="submit" -----------> button type="button"


<!DOCTYPE html>
<html>
<body>

<div class="container-fluid">
    <header>
        <h1>Business Registration Address Setup</h1>
    </header>

    <label>number 1</label>
    <input type="text" name="number1" id="number1" placeholder="enter single digit number"> <br>
    +<br>
    <label>number 2</label>
    <input type="text" name="number2" id="number2" placeholder="enter single digit number"><br>
    <button type="button" class="btn btn-info" onclick="submit1()">submit</button><br><br>
    <div class="screen" id="screen1"></div>


</div> <!-- End Container-->


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$( document ).ready(function() {

});
function submit1(){
    var a =  document.getElementById("number1").value;
    var b =  document.getElementById("number2").value;
    var c = parseInt(a) + parseInt(b); 
    document.getElementById("screen1").innerHTML=c;
  }
</script>

</body>
</html>

 

Edit
 

document.getElementByID  -------> document.getElementById
var c=a+b ----------------------> var c = parseInt(a) + parseInt(b)
button type="submit" -----------> button type="button"

相关问答

更多

  • 在JavaScript中添加数字(Adding Numbers in JavaScript)[2022-08-24]

    你试图将元素解析为一个int，并取int的值： parseInt(document.getElementById("firstNumber")).value 从元素获取值并将其解析为int： parseInt(document.getElementById("firstNumber").value) 此外，解析在这里是不必要的（分配给属性时并没有意义）： parseInt(document.getElementById("result")).innerHTML =num1+num2; 直接分配属性： ...

  • HTML，PHP和javascript [重复](HTML, PHP and javascript [duplicate])[2022-08-14]

    它在服务器上运行，输出html发送到客户端，浏览器显示它。 It is run on the server, the output html is sent to the client, and your browser displays it.

  • 使用html和javascript添加两个数字[重复](Adding two numbers using html and javascript [duplicate])[2023-02-27]

    Business Registration Address Setup

    如果不在JavaScript中使用parseFloat，则无法正确添加两个数字(Cannot add two numbers correctly without using parseFloat in JavaScript)[2022-06-03]

    $.val()返回一个字符串值。 所以在你的第一个例子中，你将两个返回的字符串转换为数字，并且计算很好。 如果使用parseFloat($('#txt1').val() + $('#txt2').val())则+不能作为算术运算符，而是作为字符串连接。 所以你将这两个字符串连接起来并在之后进行转换，这会给出错误的结果。 使用-的示例将起作用，因为没有使用字符串操作-并且因此所有值在应用操作之前都会隐式转换为数字。 $.val() returns a string value. So in your firs ...

  • 使用Javascript动态复制HTML DIV [重复](Dynamically Duplicate HTML DIV with Javascript [duplicate])[2023-01-22]

    它看起来不像你在这里使用JavaScript库。 如果你使用的是jQuery，你可以简单地使用clone来制作一个元素的深层副本。 克隆文档 否则，您需要使用cloneNode方法。 它也做了很深的复制。 我如何做到这一点是在普通的html / css中创建一次元素，让你的设计师.hidden地设计它，然后简单地添加一个.hidden类。 给它一个像#rootElement这样的ID，这样你以后就可以轻松找到它来进行克隆。 在您的javascript中，您可以克隆该元素，用数据填充它，并删除.hidden类 ...

  • 从html标签获取数字[重复](Getting numbers from html tags [duplicate])[2023-01-07]

    您的列表项是unicode类型，您可以将列表项转换为如下字符串： numbers = [str(number.contents[0]) for number in tags] 要总结列表项，您需要将它们转换为整数，而不是字符串： numbers = [int(number.contents[0]) for number in tags] s = sum(numbers) 输出： >>> my_list = [u'97', u'97', u'90', u'90', ...] >>> >>> [str(it ...

  • 如何使用javascript迭代数字001 002 ... [重复](How to iterate numbers 001 002 … with javascript [duplicate])[2023-04-09]

    尝试这个： function pad(s) { while (s.length < 3) s = '0' + s; return s; }; // your code for (var i=1; i

  • Javascript添加数字就好像它们是一个字符串[重复](Javascript adding numbers as if they were a string [duplicate])[2022-07-18]

    JavaScript中的+运算符可以表示数学加法或字符串连接。 你得到的是基于操作数的隐式类型。 如果其中一个操作数是一个字符串，另一个操作数将被转换为字符串，您将获得连接。 诀窍是首先对数字进行数学运算（可以用括号括起数学部分或在单独的语句中进行数学运算），然后将结果注入到字符串中。 要将包含数字字符的字符串强制转换为数字，可以使用parseInt()和parseFloat() ： var result = parseInt(value, 10) + 1; 请注意，对于parseInt() ，您应该提 ...

  • JavaScript - 连接两个数字并将结果视为数字[重复](JavaScript - concat two numbers and treat the result as a number [duplicate])[2022-04-25]

    在输入标记中使用数字作为值是没有意义的。 类型始终是一个字符串。 要转换为数字，请使用Number或一元+ secsVal = Number(secsVal); 要么 secsVal = +secsVal; It makes no sense to use a number for a value in an input tag. The type is always a string. To convert to number use either Number or an unary + secsV ...

  • javaScript将两个数字相乘并将结果显示为第三个html输入(javaScript multiply two numbers and show the result into third html input)[2022-07-06]

    做这样改变 Do Change like this