Tab JHtml không có ID - làm cách nào tôi có thể chỉ định chúng?

Sử dụng mã dưới đây, tôi có thể tạo thành công các tab mà tôi cần, tuy nhiên, các Tab không chứa bất kỳ ID nào cho kiểu dáng cụ thể hoặc công việc jQuery.

Có một số lượng tab khác nhau , tùy thuộc vào Nhóm người dùng, v.v., và hầu hết trong số chúng được cập nhật trên một số khoảng thời gian với thông tin mới. Đang cập nhật nội dung của mỗi Pane không phải là một vấn đề khi họ làm có ID, nhưng giải quyết các tab có liên quan để cảnh báo cho người sử dụng các thông tin mới là vấn đề.

Có thể $optionsmảng chứa thông số kỹ thuật cho các ID được tạo ra?

// Start Tabs
echo '<div class="tabbable tabs-left">';
echo JHtml::_('bootstrap.startTabSet', 'tab_group_ida', $options);
// Tab 1
echo JHtml::_('bootstrap.addTab', 'tab_group_ida', 'tabs_1a', 'Tab 1');
echo '<p>Pri putant iisque detracto ut.</p>';
echo JHtml::_('bootstrap.endTab');
// Tab 2
echo JHtml::_('bootstrap.addTab', 'tab_group_ida', 'tabs_2a', 'Tab 2');
echo '<p>Duo delectus vivendum id, sit.</p>';
echo JHtml::_('bootstrap.endTab');
// Tab 3
echo JHtml::_('bootstrap.addTab', 'tab_group_ida', 'tabs_3a', 'Tab 3');
echo '<p>Tamquam constituam an qui, ea.</p>';
echo JHtml::_('bootstrap.endTab');
// End Tabs
echo JHtml::_('bootstrap.endTabSet');
echo '</div>';

Chế độ xem Firebird của các tab:

jquery jhtml

— GDP
nguồn

Câu trả lời:

Chỉ cần sử dụng một bộ chọn thuộc tính. Ví dụ: bạn có thể nhắm mục tiêu thuộc tính href trong css với [href = "# tab_1a"]. Tôi không có kinh nghiệm với jQuery, nhưng ví dụ trong câu trả lời GDP sử dụng các bộ chọn thuộc tính để thêm id, vì vậy tôi đoán jQuery hỗ trợ điều này.

Điểm mấu chốt là bạn không thực sự cần thêm bất cứ thứ gì, chỉ cần sử dụng các bộ chọn thuộc tính để nhắm mục tiêu một cái gì đó đã tồn tại, trong trường hợp của bạn.

Đôi khi: nth-child là một sự thay thế khả thi.

— Ville Niemi
nguồn

Nếu bạn nhìn vào mã nguồn của trang, bạn sẽ thấy Joomla đang sử dụng jQuery để nối các phần tử LI và A khi chạy. Bạn có thể sử dụng cùng một kỹ thuật để thêm ID, Class, CSS hoặc bất kỳ thuộc tính nào khác mà bạn có thể cần.

Sử dụng mã jQuery này để thêm tiền tố vào tên của tab, sau đó thêm thuộc tính ID vào neo.

Lưu ý: Đảm bảo mã được chạy sau khi Joomla tạo các tab, nếu không chúng sẽ không tồn tại để hoạt động.

jQuery(document).ready(function($) {
    var idPrefix = 'myId-';
    $("#tab_group_idaTabs li").each(function(li) {
        var a = $(this).children().first("a");
        var tabname = a.attr('href').replace('#','');
        a.attr('id',idPrefix + tabname);
    });
});

— GDP
nguồn

Xin vui lòng, không đặt kiểu css nội tuyến mặc dù. Điều đó không tuyệt.

— Seth Warburton

Đúng, chỉ có để thể hiện một phương thức jQuery được hỗ trợ

— GDP

jQuery(document).ready(function($) { });<< Sử dụng điều này để bọc mã jQuery của bạn, thay vì sử dụng (function($){và sau đó $(document).ready(function() {. @Seth là đúng, bạn chỉ cần sử dụng jQuery để thêm các lớp của bạn và phần còn lại có thể được thực hiện bằng CSS thuần túy.

— Lodder

Điểm lấy trên CSS, lol .... chỉ là một thuộc tính ngẫu nhiên để chứng minh.

— GDP

Ngoài ra, hãy đảm bảo biến $('a[href="#tabs_1a"]')và các đối tượng khác thành một biến nếu bạn đang sử dụng chúng nhiều lần, giống như bạn có với tab đầu tiên :)

— Lodder

Tôi đã cố gắng thêm các biểu tượng ico-moon vào một tab và bạn có thể gói một trong một thẻ:

    // Tab 2
echo JHtml::_('bootstrap.addTab', 'tab_group_ida', 'tabs_2a', '<i class="icon-info"><i>'.Tab 2');

vì vậy bạn cũng có thể gói nó trong một khoảng:

<?php echo JHtml::_('bootstrap.addTab', 'ID-Tabs-Group', 'tab2_id', '<span class="icon-signup">'.JText::_('DESCRIPTION').'</span>'); ?>

— iamrobert
nguồn