2012-02-20 3 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 сбрасываются при обратной передаче. Вы можете использовать скрытое поле, чтобы отслеживать состояние страницы, чтобы обойти это. Так что на вашей странице вы можете иметь что-то вроде

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

и вы можете получить значение, как так:

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

Так что в вашем коде позади вы можете сказать ему

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

То же самое i столкнулся и зафиксирован в моем приложении asp.net mvc, например:

Простым способом является установка значения 1 для Selec ted в вашем Action.you может принять SelectedTab как int в вашем классе модели, поэтому, когда вы передаете эту модель в свой вид, автоматически выбирается первая вкладка, но при загрузке документа вы должны получить значение или в viewdata или в поле hiden

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 %>'; 
     }); 
Смежные вопросы