填寫導航標籤動態

我有一些選項卡的視圖：填寫導航標籤動態

<ul class="nav nav-tabs" data-tabs="tabs"> 
@foreach (var item in Model) 
{ 
    <li class="@(item.Well == 1 ? "active" : "")"><a href="#[email protected]" data-toggle="tab">@item.Well</a> </li> 
} 
</ul> 

<div id="tabs" class="tab-content"> 
    <div id="tab-1" class="tab-pane active"> 
     <p>Tab 1</p> 
    </div> 
    <div id="tab-2" class="tab-pane"> 
     <p>Tab 2</p> 
    </div> 
    <div id="tab-3" class="tab-pane"> 
     <p>Tab 3</p> 
    </div> 
</div> 

<script> 
    $(function() { 
    $("#tabs").tabs(); 
    }); 
</script>

的標籤本身做工精細，但有這個型號列表：@model List<WebApplication1.Models.WellModel>持有一些「井」的。該視圖獲取了其中所有井的整個模型，所以我的問題是如何使用正確井中的數據填充選項卡。例如，當我點擊「井1」的選項卡時，它應該顯示該井的id，時間戳，圖像等。該井是簡單的「好1」，「2號井」，「好3」等..

下面是該井的模型：

public class WellModel 
    { 
     public string Id { get; set; } 
     public int Well { get; set; } 
     public byte FirstImage { get; set; } 
     public byte[] LastImage { get; set; } 
     public string TimeStamp { get; set; } 
    }

任何提示？

UPDATE：

我已經添加了這個選項卡中：

<p id="welltab"></p> 
    <script type="text/javascript"> 
     $("li").click(function() { 
      var well = $(this).data("well"); 
      document.getElementById("welltab").innerText = well; 
      console.log(well); 
     }); 
    </script>

更新2：

我如何告訴我的JS要使用的ID？兩個元素不能有相同的id，並且爲選項卡中的每個元素編寫函數對我來說聽起來並不是最優的。

這兩個選項卡：

<div id="tab-1" class="tab-pane active"> 
    <h2>Slide ID: </h2> 
    <h2 id="wellHeader"></h2> 
    <h4 id="wellId"></h4> 
</div> 
<div id="tab-2" class="tab-pane active"> 
    <h2>Slide ID: </h2> 
    <h2 id="wellHeader"></h2> 
    <h4 id="wellId"></h4> 
</div>

而且此Javascript：

<script type="text/javascript"> 
$("li a").click(function() { 
    var slide = $(this).data("wellid"); 
    var well = $(this).data("well"); 
    document.getElementById("wellHeader").innerText = slide; 
    document.getElementById("wellId").innerText = well; 
}); 
</script>

來源

2015-09-29 Khaine775

在您的每個中，爲您的屬性添加數據屬性。

@foreach (var item in Model) 
{ 
    <li class="@(item.Well == 1 ? "active" : "")"><a href="#[email protected]" data-toggle="tab" data-wellid="@item.Id" data-well="@item.Well" data-FirstImage="@item.FirstImage">@item.Well</a> </li> 
}

需要

當現在越來越屬性

$("li a").click(function(){ //add a class check in the selector to make it specific 
    var id = $(this).data("id");// access the attributes using the data method. 
    var wellId = $(this).data("wellid"); 
});

來源

2015-09-29 08:48:31 Rex

整潔您可以使用clicked li item的屬性。你能舉一個我如何獲得屬性的例子嗎？ – Khaine775

@ Khaine775更新了答案 – Rex

我試着添加那個javascript，但是這個值並沒有被解析到它。控制檯說'好'是'undefined' – Khaine775

這樣做，你使用某種類型的庫是切換的相應div知名度的假設，如果您單擊根據li ，您可以像打印菜單一樣打印標籤頁：

@foreach(var well in Model) 
{ 
    <div id="[email protected]" class="tab-pane @(well.Well == 1 ? "active" : "")"> 
     <p>Tab @well.Well mister Anderson</p> 
     <p>@well.TimeStamp</p> 
     <!-- and so on --> 
    </div> 
}

來源

2015-09-29 08:48:10 CodeCaster

填寫導航標籤動態

回答

相關問題