2016-05-20 5 views
0

Я хочу, чтобы реализовать эту боковую панель семантического интерфейса в моих страницах, это мой код:как отображать семантические боковые панели с javascript?

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 

<link rel="stylesheet" href="dist/semantic.min.css" /> 
<script type="text/javascript" src="dist/semantic.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div class="ui top attached demo menu"> 
<a class="item"> 
<i class="sidebar icon"></i> 
Menu 
</a> 
</div> 
<div class="ui bottom attached segment pushable"> 
<div style="" class="ui inverted labeled icon left inline vertical sidebar menu"> 
    <a class="item"> 
    <i class="home icon"></i> 
    Home 
</a> 
<a class="item"> 
    <i class="block layout icon"></i> 
    Topics 
</a> 
<a class="item"> 
    <i class="smile icon"></i> 
    Friends 
</a> 
<a class="item"> 
    <i class="calendar icon"></i> 
    History 
</a> 
</div> 
<div class="pusher"> 
<div class="ui basic segment"> 
    <h3 class="ui header">Application Content</h3> 
    <p></p> 
    <p></p> 
    <p></p> 
    <p></p> 
</div> 
</div> 
</div> 
</form> 
<script> 
     $('.context.example .ui.sidebar') 
      .sidebar({ 
       context: $('.context.example .bottom.segment') 
      }) 
      .sidebar('attach events', '.context.example .menu .item') 
     ; 
</script> 
</body> 
</html> 

Это то, что я хочу:

What I want

, но когда я нажимаю на меню ничего не происходит , Вы можете найти мой пример здесь:

My example which I want to implement

ответ

1

Это потому, что вы ищете класс, который не существует.

Ваш Javascript код ищет: $('.context.example .ui.sidebar'), но в вашем HTML-коде нет класса доступных по имени: .context.example.

Поэтому это не сработает. Если вы это сделаете:

<form id="form1" runat="server"> 
<div class="context example"> <!-- context & example class added --> 
    <div class="ui top attached demo menu"> 
     <a class="item"> 
      <i class="sidebar icon"></i> Menu 
     </a> 
    </div> 
    <div class="ui bottom attached segment pushable"> 
     <div style="" class="ui inverted labeled icon left inline vertical sidebar menu"> 
      <a class="item"> 
       <i class="home icon"></i> Home 
      </a> 
      <a class="item"> 
       <i class="block layout icon"></i> Topics 
      </a> 
      <a class="item"> 
       <i class="smile icon"></i> Friends 
      </a> 
      <a class="item"> 
       <i class="calendar icon"></i> History 
      </a> 
     </div> 
     <div class="pusher"> 
      <div class="ui basic segment"> 
       <h3 class="ui header">Application Content</h3> 
       <p></p> 
       <p></p> 
       <p></p> 
       <p></p> 
      </div> 
     </div> 
    </div> 
</div> 
</form> 

Он будет работать.