Chào các bạn.
Mình gặp 1 chút vấn đề, nếu bạn có thời gian thì rất mong nhận được sự giúp đỡ của bạn. Đây là link đoạn code của mình.
Hiện tại mình đang thiết kế giao diện menu trong hệ thống, mình muốn ấn vào số 1 thì nó hiện những dòng 1-a , 1-b … 1-h, sau đó ấn vào số 2 nó sẽ tự động ẩn 1-a … 1-h đi và hiện 2-a … 2-h. Mình muốn tạo list menu ẩn hiện như thế, sau đó sẽ đặt tag <a> đường link vào vị trí các số 1-a … 9 đến các screen khác của hệ thống .
Vậy hiện tại mình phải làm gì để có thể ẩn hiện được như thế. Rất mong được bạn chỉ dẫn. Cám ơn bạn trước.
Cách ẩn hiện dữ liệu trong table của html CSS
2 Likes
Bạn có thể tham khảo thuộc tính innerHTML của JS.
3 Likes
Để ẩn/hiện một phần html thì có rất nhiều cách để làm, tuỳ vào nhu cầu trong trường hợp cụ thể.
Bạn tham khảo link này để coi 1 trong những cách đó nha, cách này rát đơn giản
https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
ban có thể tìm hiểu thêm thông qua các keyword;
show hide div hoặc toggle to show hide div hoăc show div on click
5 Likes
Cám ơn bạn nhiều nhé.
Vấn đề ở đây là mình muốn thao tác với đối tượng nằm trong table chứ không phải dạng khối div ẩn hiện. nếu chỉ cần ẩn hiện khối thì hoàn toàn có thể dùng jquery hoặc dùng bootstrap đều có thể giải quyết được.
<script type="text/javascript">
$( document ).ready(function() {
$("th a").click(function(e){
var el = e.target;
$("tr th").each(function(){
if($(this).children().length ==0){
if($(this).text().substring(0, 1) == el.innerText){
$(this).css('color', '');
} else {
$(this).css('color', 'transparent');
}
}
})
})
});
</script>
Ý bạn là khi nhấn thì sẽ thay đổi số còn chữ và vị trí giữ nguyên?
Thế thì lấy dữ liệu hiện có trên bảng bằng innerText hoặc innerHTML rồi thao tác thôi.
Rõ ràng là dữ liệu có dấu phân cách giữa số và chữ cái 1-a, dấu trừ (-). Bạn chỉ việc tách để lấy chữ cái, sao đó nối với số vừa nhấn và gán lại thôi.
2 Likes
Cám ơn bạn nhiều nhé.
Vấn đề ở đây là mình muốn ẩn text đi sau đó khi ấn vào số tiếp theo nó ẩn cái nội dung ở số thấp hơn đi và hiện nội dung mới tương ứng.
Cám ơn bạn nhiều nhé.
Mình muốn ẩn text đi sau đó khi ấn vào số tiếp theo nó ẩn cái nội dung ở số thấp hơn đi và hiện nội dung mới tương ứng.
như bạn mô tả thì mình đang làm ở trên theo ý bạn
hay bạn muốn thay text 1-a, 1-b…1-h bằng 2-a, 2-b,…2-h à
1 Like
Đúng rồi bạn à, mình gặp phải vấn đề đó, mình xin diễn tả quá trình đó như sau:
-
Đầu tiên table chỉ có 1 cột từ 1 đến 10 hiện ra.
-
Sau đó khi ấn vào 1 hiện 1 loạt 1-a … đến 1-h (trong 1-a đến 1-h này sẽ đặt link
<a>để về sau sẽ link đến màn hình con khác) -
Sau đó khi ấn vào 2 hiện 1 loạt 2-a … đến 2-h (trong 2-a đến 2-h này sẽ đặt link
<a>để về sau sẽ link đến màn hình con khác)
…
- Sau đó khi ấn vào 10 hiện 1 loạt 10-a … đến 10-h (trong 10-a đến 10-h này sẽ đặt link
<a>để về sau sẽ link đến màn hình con khác)
Vấn đề là có quá nhiều nội dung bị trùng lặp như vậy phải xử lý table hoặc innerHTML như thế nào, rất mong được mọi người chỉ giáo thêm.
Đúng rồi đó bạn, cứ thay lần lượt vào đúng vị trí đó, vấn đề là 1- a … 10-h đều đặt link để link đến màn hình khác chứ không chỉ là file text
Có 2 cách
- C1 đó là bạn hãy dùng thẻ
<a>link tới màn hình con khác cho nó hidden đi
từ a -> h mỗi cái là 10 thẻ a hidden ứng với index 1-10. Sau đó hidden show tùy vào sự kiện click</a> - C2 đó là xử dụng js attr tới thuộc tính href để thay đổi link tới màn hình con.
1 Like
code mình fix ở trên rồi nhé
bạn có thể run lại code pen nha.
<script type="text/javascript">
$( document ).ready(function() {
$(".text-dark").click(function(e){
var el = e.target;
$(".nav").each(function(){
if($(this).text() != ''){
$(this).text(el.innerText + $(this).text().substring(1, 3));
}
})
if(el.innerText == '1'){
$('#a').attr('href', 'https://daynhauhoc.com/')
$('#b').attr('href', 'https://daynhauhoc.com/')
$('#c').attr('href', 'https://daynhauhoc.com/')
$('#d').attr('href', 'https://daynhauhoc.com/')
$('#e').attr('href', 'https://daynhauhoc.com/')
$('#f').attr('href', 'https://daynhauhoc.com/')
$('#g').attr('href', 'https://daynhauhoc.com/')
}
else if(el.innerText == '2'){
$('#a').attr('href', 'http://developer-docs.wacom.com/')
$('#b').attr('href', 'http://developer-docs.wacom.com/')
$('#c').attr('href', 'http://developer-docs.wacom.com/')
$('#d').attr('href', 'http://developer-docs.wacom.com/')
$('#e').attr('href', 'http://developer-docs.wacom.com/')
$('#f').attr('href', 'http://developer-docs.wacom.com/')
$('#g').attr('href', 'http://developer-docs.wacom.com/')
}
})
});
</script>
4 Likes
Cám ơn bạn nhiều nhiều nhé. Thực sự là vi diệu.
2 Likes
check solution ngay đi 
1 Like
Xin lỗi, cuối tuần mình bận quá nên rep muộn quá. Thực sự quá ổn bạn ạ. Tuy nhiên mình muốn hỏi thêm chút là giả sử các mục trong file index của mình nó là dạng tên không trùng lặp nhau rất khó sửa số hàng loạt như vậy thì liệu có thể gom hết lại trong 1 màn hình được không?
bạn đặt câu hỏi mình chả hiểu gì cả, bạn diễn đạt cho chuẩn @@
1 Like
Thực sự không share code lên rất khó diễn tả, mà nó lại là 1 số thông tin của khách hàng nên không dám công khai trên mạng.
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?