javascript实现点击文本框更改CSS样式

2026-04-21 01:28:21

1、目标:点击下图的数字后,该数字所在的文本框的样式发生改变。

javascript实现点击文本框更改CSS样式

2、下面是这些数字列表的HTML代码:

<div class="q_box" onclick="answer(this,1)" id="1">1</div>

<div class="q_box" onclick="answer(this,2)" id="2">2</div>

<div class="q_box" onclick="answer(this,3)" id="3">3</div>

<div class="q_box" onclick="answer(this,4)" id="4">4</div>

<div class="q_box" onclick="answer(this,5)" id="5">5</div>

<div class="q_box" onclick="answer(this,6)" id="6">6</div>

<div class="q_box" onclick="answer(this,7)" id="7">7</div>

<div class="q_box" onclick="answer(this,8)" id="8">8</div>

<div class="q_box" onclick="answer(this,9)" id="9">9</div>

<div class="q_box" onclick="answer(this,10)" id="10">10</div>

<div class="q_box" onclick="answer(this,11)" id="11">11</div>

<div class="q_box" onclick="answer(this,12)" id="12">12</div>

<div class="q_box" onclick="answer(this,13)" id="13">13</div>

..........

javascript实现点击文本框更改CSS样式

3、下面是这些数字列表的JAVASCRIPT代码:

<script type="text/javascript">

        function answer(obj, id) {

                    $('#'+id).attr('class','q_box_f');

}

</script>

4、这里CSS代码省略了。

下面它的效果图:

javascript实现点击文本框更改CSS样式

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢