 |
1
abelyao Nov 8, 2014
就按 jQuery 来举个例子吧：
当按钮的点击事件触发的时候，取得它在同辈同类元素中的索引位置(index)； 然后再 hide 所有 li，然后 li[index].show() （仅思路，不是正确语法）把对应的那个 li 显示出来； |
 |
3
yizi Nov 8, 2014
可以在CSS里面加2个class，分别设置display为block和none。想让哪个li显示就给它加个block的class，其他的都加none的class就好了吧。
|
 |
4
ChiChou Nov 8, 2014
可以考虑先把数据序列化成 json；结合 underscore 的数组方法（如 map, filter 等）生成一个数组的拷贝，再用 underscore 的 template 功能渲染到页面上。
Angular 之类大体是这个思路，代码写起来要更清爽一些。楼主要是刚入门，建议 underscore 的方案。 |
 |
5
kxxoling Nov 8, 2014
前段时间用 Avalon 双向绑定做过一个类似的，大概也是先 json 化数据，循环输出 li 元素，再给 li 加上 ms-if="chosen_text in json.content_text" 过滤实现的（Coffee 写多了，不会写JS了 (/w`\\)
|
 |
6
feiyuanqiu Nov 8, 2014
你们给楼主说那么多高大上的他也不会弄...我就直接贴代码了
<iframe width="100%" height="300" src="http://jsfiddle.net/zoxhxow4/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe> |
 |
7
grzhan Nov 8, 2014
$(parent_div).on('click', 'button', function(){
var index = $(this).index(); $('li').hide().eq(index).show(); }); |
 |
8
YAFEIML OP @feiyuanqiu 对呀对呀
|
 |
13
khowarizmi Nov 8, 2014
angular filter search
官方有事例 |
 |
14
klam Nov 8, 2014
@khowarizmi
我也先想到angular，但是如果不用框架都写不出来，那引入angular纯粹是增加项目复杂度 |
 |
15
sneezry Nov 8, 2014
|
 |
16
chemzqm Nov 8, 2014
如果LZ在我们公司，直接一巴掌呼死😠
|
|
18
YAFEIML OP |
|
20
sneezry Nov 8, 2014
|
|
22
sneezry Nov 8, 2014
@YAFEIML 那缩进什么的就别计较了
<style> #li2, #li3, #li4 { display: none; } </style> <button onclick="show(1)">按钮1</button> <button onclick="show(2)">按钮2</button> <button onclick="show(3)">按钮3</button> <button onclick="show(4)">按钮4</button> <li id="li1">AAAAAA888AAAAAAA</li> <li id="li2">AAAAAA666AAAAAAA</li> <li id="li3">AAAAAA555AAAAAAA</li> <li id="li4">AAAAAA333AAAAAAA</li> <script> function show(n) { document.getElementById('li1').style.display = 'none'; document.getElementById('li2').style.display = 'none'; document.getElementById('li3').style.display = 'none'; document.getElementById('li4').style.display = 'none'; document.getElementById('li'+n).style.display = 'list-item'; } </script> |
 |
25
Mutoo Nov 8, 2014
这不就是 jQuery UI 的 tabs 么
http://jqueryui.com/tabs/ |
 |
26
ccbikai PRO <body>
<div id="content"> <div class="btn-group"> <input type="button" class="btn-select" data-attr="888" value="按钮1" /> <input type="button" class="btn-select" data-attr="666" value="按钮2" /> <input type="button" class="btn-select" data-attr="555" value="按钮3" /> <input type="button" class="btn-select" data-attr="333" value="按钮4" /> </div> <div class="list"> <li>AAAAAA888AAAAAAA</li> <li>AAAAAA666AAAAAAA</li> <li>AAAAAA555AAAAAAA</li> <li>AAAAAA333AAAAAAA</li> </div> </div> </body> JavaScript: var show = function(text){ $("li").css('display','none'); $("li:contains(" + text + ")").css('display','block'); }; $('.btn-select').click(function (event) { var tar = event.target || event.srcElement, text = tar.getAttribute('data-attr'); show(text); }); 用了 jQuery 的 :contains 选择器 |
|
27
ccbikai PRO |
|
30
chemzqm Nov 8, 2014
<div id="btn">
<button onclick="show(this)">1</button> <button onclick="show(this)">2</button> <button onclick="show(this)">3</button> <button onclick="show(this)">4</button> </div> <div id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </div> <script> function show(el) { var index = 0; while (el = el.previousSibling) { if (/^button$/i.test(el.tagName)) { index++; } } var list = document.getElementById('list'); var childs = Array.prototype.slice.call(list.childNodes); childs = childs.filter(function(node) { return /^li$/i.test(node.tagName); }) childs.forEach(function(li, i) { if (i === index) { li.style.display = 'block'; } else { li.style.display = 'none'; } }) } </script> 高效率版，无任何依赖，目测支持ie6+，支持动态增删元素。 这种需求我用 https://github.com/stagas/tabify 这个插件，还有一个更复杂点儿支持排序的 https://github.com/chemzqm/tabs |
|
31
sneezry Nov 9, 2014
|
Select Language