jquery更改文本框内容效果实现

最新推荐文章于 2022-03-10 15:04:14 发布

weixin_34239169

最新推荐文章于 2022-03-10 15:04:14 发布

阅读量430

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/adamboy/blog/52790

版权

2019独角兽企业重金招聘Python工程师标准>>>

common.js:

$(function(){
    $('#menu').children('li').eq(0).addClass('add');
    $('#content').text($('#menu').children('li').eq(0).text());
    $('#menu li').click(function(){
        var index = $(this).index();
        var liValue = $(this).text();
        $('#menu li').removeClass('add');
        $(this).addClass('add');
        $('#content').text(liValue);
    })
})

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test jquery</title>
<script src='jquery.js'></script>
<script src='common.js'></script>
<style>
ul li{ list-style:none;float:left;margin-right:5px;border:1px solid #d4d4d4;width:50px;}
ul{ margin:0;padding:0;}
.cl{ clear:both;}
.add{ background:#d4d4d4;}
</style>
</head>
<body>
<ul id='menu'><li>1</li><li>2</li><li>3</li></ul>
<div class='cl'>
<textarea id='content'></textarea>
</div>
</body>
</html>