2012-02-20 13 views
1
body { 
font-size: 80%; 
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; 
} 

ul#tabs { 
list-style-type: none; 
margin: 30px 0 0 0; 
padding: 0 0 0.3em 0; 
} 

ul#tabs li { 
display: inline; 
} 

ul#tabs li a { 
color: #42454a; 
background-color: #dedbde; 
border: 1px solid #c9c3ba; 
border-bottom: none; 
padding: 0.3em; 
text-decoration: none; 
} 

l#tabs li a:hover { 
background-color: #f1f0ee; 
} 

ul#tabs li a.selected { 
color: #FFF; 
background-color: #047700; 
font-weight: bold; 
padding: 0.7em 0.3em 0.38em 0.3em; 

} 

div.tabContent { 
border: 1px solid #047700; 
padding: 0.5em; 
background-color: #f1f0ee; 
} 


ASP.NETでポストバックが発生した後に最初のタブを選択しないようにしますか?

var tabLinks = new Array(); 
var contentDivs = new Array(); 

function init() { 

    // Grab the tab links and content divs from the page 
    var tabListItems = document.getElementById('tabs').childNodes; 
    for (var i = 0; i < tabListItems.length; i++) { 
     if (tabListItems[i].nodeName == "LI") { 
      var tabLink = getFirstChildWithTagName(tabListItems[i], 'A'); 
      var id = getHash(tabLink.getAttribute('href')); 
      tabLinks[id] = tabLink; 
      contentDivs[id] = document.getElementById(id); 
     } 
    } 

    // Assign onclick events to the tab links, and 
    // highlight the first tab 
    var i = 0; 

    for (var id in tabLinks) { 
     tabLinks[id].onclick = showTab; 
     tabLinks[id].onfocus = function() { this.blur() }; 
     if (i == 0) tabLinks[id].className = 'selected'; 
     i++; 
    } 

    // Hide all content divs except the first 
    var i = 0; 

    for (var id in contentDivs) { 
     if (i != 0) contentDivs[id].className = 'tabContent hide'; 
     i++; 
    } 
} 

function showTab() { 
    var selectedId = getHash(this.getAttribute('href')); 

    // Highlight the selected tab, and dim all others. 
    // Also show the selected content div, and hide all others. 
    for (var id in contentDivs) { 
     if (id == selectedId) { 
      tabLinks[id].className = 'selected'; 
      contentDivs[id].className = 'tabContent'; 
     } else { 
      tabLinks[id].className = ''; 
      contentDivs[id].className = 'tabContent hide'; 
     } 
    } 

    // Stop the browser following the link 
    return false; 
} 

function getFirstChildWithTagName(element, tagName) { 
    for (var i = 0; i < element.childNodes.length; i++) { 
     if (element.childNodes[i].nodeName == tagName) return element.childNodes[i]; 
    } 
} 

function getHash(url) { 
    var hashPos = url.lastIndexOf('#'); 
    return url.substring(hashPos + 1); 
} 

私はAsp.netのドロップダウンに値を選択すると、そこにポストバックであり、最初のタブが選択されます。ポストバックが発生した後に最初のタブが選択されないようにするには、上記のコードを使用します。

答えて

1

問題は、JavaScript変数がポストバック時にリセットされることです。隠れたフィールドを使用して、ページの状態を追跡し、これを回避することができます。だから、あなたの後ろにあなたのコード内で

private void Page_Load(object sender, System.EventArgs e) 
{ 
    if (Page.IsPostBack) 
     selectedTabs.Value = "postback"; 
    else 
     selectedTabs.Value = "pageload"; 
} 
0

同じことを、それを伝えることができ

document.getElementById('<%= selectedTabs.ClientID %>').value 

:だからあなたのページにあなたは

<input type="hidden" id="selectedTabs" value="" runat="server"> 

のようなものを持つことができ、あなたはそうのような値を取得することができます私は直面し、私のasp.net mvcアプリケーションのように固定:

簡単な方法は、値を1に設定することです。あなたのモデルクラスのintとしてSelectedTabを取ることができるので、このモデルをビューに渡すと自動的に最初のタブが選択されますが、ドキュメントのロード時には値を取得するか、ビューデータまたは隠れたフィールドに取得する必要があります

example: 

In action controller 

public action abc() 
{ 
"Intial your model here" and set value as 

model.SelectedTab = 1; 
return view("abc",model); 
} 
In view: 

     $(document).ready(function() { 
        var selected= '<%=Model.SelectedTab %>'; 
     }); 
関連する問題