代码之家 › 专栏 › 技术社区 › BobbyJones

选择具有相同元素id的选项卡内容

tabs html jquery javascript

BobbyJones · 技术社区 · 7 年前

我真的需要你的帮助,

由于我的选项卡是动态生成的,所以它们和使用相同元素id的其他选项卡具有相同的外观和感觉。例如,我如何单独进入元素名称为:XAL-2018-789101的选项卡内容,并设置输入id“fileno”的值。或者我应该用另一种方法来重组它?因为它不是一个普通的表单,只有一个表单元素每次都使用一个唯一的id来个性化表单元素?

使用jQuery的答案也很好。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

    <div id="tabs_container" style="display: none;">

            <ul class="tabs">
                <li><a href='#tab1'>XAL-2018-123456</a></li>
                <li><a href='#tab2'>XAL-2018-789101</a></li>
                <li><a href='#tab3'>XAL-2018-111213</a></li>
            </ul>   

            <div class="tab_container">

                <div class="tab_wrapper">

                    <div id='tab1' class='tab_content' name='XAL-2018-123456'><input type="text" id="fileno"></div>
                    <div id='tab2' class='tab_content' name='XAL-2018-789101'><input type="text" id="fileno"></div>
                    <div id='tab3' class='tab_content' name='XAL-2018-111213'><input type="text" id="fileno"></div>

                </div>

            </div>      

        </div>

    </div>

</body>

</html>

1 回复 | 直到 7 年前

Snowmonkey 7 年前

这将处理“转到相关选项卡”位,但您试图使用什么来填充该输入?

// Hide all tabs but the first
$(".tab_content").hide().first().show();
$(".tabs li a").on("click", function(event) {
  // keep the anchor from triggering.
  event.preventDefault();
  // get the clicked anchor
  let tabEl = $(this);
  // get its text
  let targetName = tabEl.text();
  // use that text to choose the right tab.
  $(".tab_wrapper [name='" + targetName + "']").show().siblings().hide();
})

.tab-container {
  border: 1px solid #333;
  background: #555;
}

#tab1 {
  background: red;
}

#tab2 {
  background: grey;
}

#tab3 {
  background: lavender;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs_pane">

  <ul class="tabs">
    <li><a href='#tab1'>XAL-2018-123456</a></li>
    <li><a href='#tab2'>XAL-2018-789101</a></li>
    <li><a href='#tab3'>XAL-2018-111213</a></li>
  </ul>

  <div class="tab_container">

    <div class="tab_wrapper">

      <div id='tab1' class='tab_content' name='XAL-2018-123456'>
        <input type="text" id="fileno">
      </div>
      <div id='tab2' class='tab_content' name='XAL-2018-789101'>
        <input type="text" id="fileno">
      </div>
      <div id='tab3' class='tab_content' name='XAL-2018-111213'>
        <input type="text" id="fileno">
      </div>

    </div>

  </div>

</div>

相反,如果您只是想将所选链接的内容放入文本输入中,请尝试以下操作。这与上面的非常相似,但只有一个选项卡el,我实际上在文本字段中粘贴了一些内容。

// No tabs to hide in this case -- we're just
//  toggling the content of a single 'tab'.
$(".tabs li a").on("click", function(event){
  // stop the anchor from doing what anchors do
  event.preventDefault();
  // save a reference to the clicked link.
  let tabEl = $(this);
  // save the text of the clicked link.
  let targetName = tabEl.text();
  // get a reference to the tab pane.
  let tabPane = $(".tab_content");
  
  // set the value of the input to the text.
  tabPane.children("#fileno").val(targetName);
  
})

.tab-container {
  border: 1px solid #333;
  background: #555;
}
#tab1 {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs_pane">

  <ul class="tabs">
    <li><a href='#tab1'>XAL-2018-123456</a></li>
    <li><a href='#tab2'>XAL-2018-789101</a></li>
    <li><a href='#tab3'>XAL-2018-111213</a></li>
  </ul>

  <div class="tab_container">

    <div class="tab_wrapper">

      <div class='tab_content'>
        <input type="text" id="fileno">
      </div>

    </div>

  </div>

</div>

所以问题变了。该选项卡是动态的,内容正在更新,输入是一种文本输入,用于填充新选项卡上表单中的file no字段。这是有效的重述吗?如果是这样,这可能会满足您的需求。很大程度上,这是直接从jQueryUI页面上撕下的关于动态选项卡的内容。

// use jqueryUI to create my tabs.
let tabs = $("#tabs_pane").tabs();

// handle the click on the 'add tab' button
$(".add-tab").on("click", addTab);

// save a reference to the input field for the new tab
let tabNameEl = $("[name='file-no']"),
  // create the text for any new tabs -- not the tab pane, but the tab.
  tabTemplate = "<li><a href='#{href}'>#{label}</a></li>",
  // get the count for the NEXT tab to be created.
  tabCounter = $(".tab-pane").length + 1;

// Actual addTab function: adds new tab using the input from the form above
function addTab() {
  // If there is a value to the fileno field, otherwise default.
  var label = tabNameEl.val() || "Tab " + tabCounter,
    // set an id on this tab
    id = "tabs-" + tabCounter,
    // create the LI for the tabs list
    li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)),
    // create the content for the new tab pane. I'm cloning the first tab,
    //  but you may want something a LOT more robust.
    tabContentHtml = $(".tab-pane").first().children().first().clone(),
    // container for the new tab content. Note that i set the ID here.
    newTabEl = $("<div>").attr("id", id).addClass("tab-pane");

  // stick that tab content into the new tab pane, after I have
  //  updated that file-no input field
  tabContentHtml.find("[name='file-no']").val(label);
  newTabEl.append(tabContentHtml)
    // append the tab to the tabs-list.
  tabs.find(".ui-tabs-nav").append(li);
  // append the tab pane to the actual container
  tabs.append(newTabEl);
  tabs.tabs("refresh");
  
  // I also want to toggle the new pane to be 
  //  the active one...
  tabs.tabs("option", "active", tabCounter-1);
  tabCounter++;
}

.tab-container {
  border: 1px solid #333;
  background: #555;
}

#tab1 {
  background: red;
}

.add-new-tab {
  border: 1px solid black;
  background: #333;
  color: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="add-new-tab">
  <label>Add new tab (enter a file no):
    <input type=text name="file-no" />
    <button class="add-tab">
      Add tab
    </button>
  </label>
</div>
<div id="tabs_pane">

  <ul class="tabs">
    <li><a href='#tabs-1'>XAL-2018-123456</a></li>
    <li><a href='#tabs-2'>XAL-2018-789101</a></li>
    <li><a href='#tabs-3'>XAL-2018-111213</a></li>
  </ul>
  <div class="tab-pane" id="tabs-1">
    <form>
      <label>File no:
        <input type="text" name="file-no" value="XAL-2018-123456" />
      </label>
      <fieldset>
        <label>Owner name:
          <input type="text" name="owner-name" />
        </label>
      </fieldset>
    </form>
  </div>
  <div class="tab-pane" id="tabs-2">
    <form>
      <label>File no:
        <input type="text" name="file-no" value="XAL-2018-789101" />
      </label>
      <fieldset>
        <label>Owner name:
          <input type="text" name="owner-name" />
        </label>
      </fieldset>
    </form>
  </div>
  <div class="tab-pane" id="tabs-3">
    <form>
      <label>File no:
        <input type="text" name="file-no" value="XAL-2018-111213" />
      </label>
      <fieldset>
        <label>Owner name:
          <input type="text" name="owner-name" />
        </label>
      </fieldset>
    </form>
  </div>
</div>