1

我有一个应用程序，其中 div 元素被动态添加到页面中。该页面还分为 jQuery UI 选项卡。

我已经使用 on() 编写了一个函数，它将一类“选定”应用于单击的任何 div，允许用户在选定的 div 上执行其他功能。

我的代码适用于第一个选项卡，但在其他选项卡上，当我单击 div 时，未应用“选定”类。我需要做什么才能使其适用于所有选项卡？

这是我的代码：

//Select an individual content element by clicking on it
$(function() {
    $(".tabcontent").on("click", "div", function(event){
        $(".selected").removeClass("selected"); //remove "selected" class from any element that has it
        $(this).addClass("selected"); //add "selected" class to the div that was clicked
    });
});

这是选项卡的 HTML：

<div id="tabs">
  <ul>
    <li class="tab"><a href="#tab-1">Section 1</a></li>
    <li class="tab"><a href="#tab-2">Section 2</a></li>
    <li class="tab"><a href="#tab-3">Section 3</a></li>
 </ul>

 <div id="tab-1" class="tabcontent">
 Section Title:<input class="sectionTitle"></input></br>
 <div contenteditable="true">blah blah</div>
 </div>
  <div id="tab-2" class="tabcontent">
 Section Title:<input class="sectionTitle"></input>
 <div contenteditable="true">blah blah</div>
 </div>
  <div id="tab-3" class="tabcontent">
  Section Title:<input class="sectionTitle"></input>
  <div contenteditable="true">blah blah</div>
  </div>
</div>
4

4 回答 4

0

您可以使用以下代码进行尝试：

$(document).ready(function() {
    $(".tabcontent").on("click", function(event){
        $(".selected").removeClass("selected"); //remove "selected" class from any element that has it
        $(this).addClass("selected"); //add "selected" class to the div that was clicked
    });
});
于 2013-09-09T13:16:45.610 回答
0

此代码适用于所有标签内容类，包括页面加载后动态创建的类

$(function() {
    $(document).on("click", ".tabcontent", function(event){
        $(".selected").removeClass("selected"); //remove "selected" class from any element that has it
        $(this).addClass("selected"); //add "selected" class to the div that was clicked
    });
});
于 2013-09-09T13:09:00.613 回答
0

你能检查一下这个演示吗：

演示

jQuery代码

$(document).ready(function(){
  $('ul.tabs').each(function(){
  // For each set of tabs, we want to keep track of
  // which tab is active and it's associated content
  var $active, $content, $links = $(this).find('a');

  // If the location.hash matches one of the links, use that as the active tab.
  // If no match is found, use the first link as the initial active tab.
  $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
  $active.addClass('active');
  $content = $($active.attr('href'));

  // Hide the remaining content
  $links.not($active).each(function () {
    $($(this).attr('href')).hide();
  });

  // Bind the click event handler
  $(this).on('click', 'a', function(e){
    // Make the old tab inactive.
    $active.removeClass('active');
    $content.hide();

    // Update the variables with the new link and content
    $active = $(this);
    $content = $($(this).attr('href'));

    // Make the tab active.
    $active.addClass('active');
    $content.show();

    // Prevent the anchor's default click action
    e.preventDefault();
  });
});

});

HTML 代码

<ul class='tabs'>
    <li><a href='#tab1'>Tab 1</a></li>
    <li><a href='#tab2'>Tab 2</a></li>
    <li><a href='#tab3'>Tab 3</a></li>
  </ul>
  <div id='tab1'>
    <p>Hi, this is the first tab.</p>
  </div>
  <div id='tab2'>
    <p>This is the 2nd tab.</p>
  </div>
  <div id='tab3'>
    <p>And this is the 3rd tab.</p>
  </div>

CSS 代码：

* {padding:0; margin:0;}

            html {
                background:url(/img/tiles/wood.png) 0 0 repeat;
                padding:15px 15px 0;
                font-family:sans-serif;
                font-size:14px;
            }

            p, h3 { 
                margin-bottom:15px;
            }

            div {
                padding:10px;
                width:600px;
                background:#fff;
            }
.tabs li {
                list-style:none;
                display:inline;
            }

            .tabs a {
                padding:5px 10px;
                display:inline-block;
                background:#666;
                color:#fff;
                text-decoration:none;
            }

            .tabs a.active {
                background:#fff;
                color:#000;
            }
于 2013-09-09T13:19:51.693 回答
0

这应该有效：

$(function () {
    $('#tabs').tabs();
    $("#tabs").on("click", ".tabcontent", function (event) {
        //remove "selected" class from any element that has it
        $('.selected').removeClass("selected");
        //add "selected" class to the div that was clicked
        $(this).addClass("selected");
    });
});

小提琴显示它的工作，使用特定的 CSS 使其可见：http: //jsfiddle.net/du6M2/

注意：如果可能，不要将事件管理器添加到文档或窗口中，从性能的角度来看，挂钩到更接近的元素（父包装器）是可取的，尤其是在较大或复杂的页面上。

于 2013-09-09T13:44:56.137 回答