asp.net invoke «target» pseudo css class

Question

У меня есть html-аккордеон, который по существу является кучей тегов с некоторым css Раздел, который затем становится стилизованным как активный через: целевой псевдокласс. Проблема заключается в том, что любые серверные элементы управления, которые вызывают обратную передачу, затем теряют выбранный раздел.

Я решил попробовать что-то добавить, поэтому сделайте мой запуск на сервере и введите имя класса, но я не уверен, как сказать, что он активен. Я также попытался установить фокусировку

пример:

 <div class="accordion vertical"> 
      <section id="Section1"> 
       <h2><a href="#Section1">LALALA LALa</a></h2> 
       <asp:Button ID="Button1" runat="server" Text="Button" /> 

      </section> 

      <section id="Section2"> 
       <h2><a href="#Section2">ZZZZZZZZZZZZZZZz</a></h2> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
      </section> 
</div> 

CSS:

.accordion { 
    width:300px; 
    height:650px; 
    overflow:hidden; 
    color:#474747; 
    background:#fff; 
    padding:10px; 
    text-align: center; 
} 

.accordion section{ 
    float:left; 
    overflow:hidden; 
    color:#333; 
    cursor:pointer; 
    margin:3px; 
} 

.accordion section:hover { 
    background:#ececec; 
} 

.accordion section p { 
    width: 92%; 
    display:none; 
    text-align: left; 
} 

.accordion section:after{ 
    position:relative; 
    font-size:24px; 
    color:#000; 
    font-weight:bold; 
} 

.accordion section:nth-child(1):after{ content:'1'; } 
.accordion section:nth-child(2):after{ content:'2'; } 
.accordion section:nth-child(3):after{ content:'3'; } 
.accordion section:nth-child(4):after{ content:'4'; } 
.accordion section:nth-child(5):after{ content:'5'; } 

.accordion section:target { 
    width: 92%; 
    background: #f3fbe5;  
    padding:10px; 
} 

.accordion section:target:hover { 
    background: #f3fbe5; 
} 

.accordion section:target h2 { 
    width:100%; 
    color:#fff; 
} 

.accordion section:target h2 a{ 
    color:#333; 
    padding:0; 
    font-weight: 700; 
} 

.accordion section:target p { 
    width: 90%; 
    display:block; 
} 

.accordion section h2 a{ 
    padding:15px 10px; 
    display:block; 
    font-size:16px; 
    font-weight:normal; 
    color:#000; 
    text-decoration:none; 
    font-family: MyraidProReg; 
} 

.vertical section{ 
    width:100%; 
    height:40px; 
    -webkit-transition:height 0.2s ease-out; 
    -moz-transition:height 0.2s ease-out; 
    -o-transition:height 0.2s ease-out; 
    transition:height 0.2s ease-out; 
} 

/*Set height of the slide*/ 
.vertical :target{ 
    height:250px; 
    width:97%; 
} 

.vertical section h2 { 
    position:relative; 
} 
/*Set position of the number on the slide*/ 
.vertical section:after{ 
    top:-60px; 
    left:250px; 
} 
.vertical section:target:after{ 
    left:-9999px; 
} 

Answer 1

мне удалось решить эту. просто подавляя мое решение здесь, если кто-то нуждается в этом (или меня поражает автомобиль, развивают амнезию и нужно решить это в будущем - привет будущий crudler).

Хорошо, проблема не связана ни с аккордеонами, ни с элементами управления внизу. Основная причина в том, что postback не сохраняет местоположение хэштега.

Таким образом, вы можете сделать некоторые смешные вещи с действием формы, либо поймать пост обратно (на каждый элементе управления), а затем установить startupscript как такового

Page.ClientScript.RegisterStartupScript(this.GetType(), "anchor", "#Section2", true); 

или если вы используете панель обновления для быть красивым и ajaxy (названный PNL в моем случае)

ScriptManager.RegisterStartupScript(pnl, pnl.GetType(), "anchor", "#Section2", true); 

вы можете сделать некоторые хитрые вещи, как поставить имя # как один из ваших HTML тегов, раздеть его на пост обратно и сделать свой метод более общий