2016-05-20 8 views
0

ich diese Seitenleiste von semantischen ui in meiner Seite implementieren möchten dies ist mein Code:wie semantische ui Seitenleisten mit Javascript anzeigen?

<!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> 

Dies ist, was ich will:

What I want

aber wenn ich auf Menü klicken nichts passiert .

My example which I want to implement

Antwort

1

Das ist, weil Sie suchen für eine Klasse, die nicht existiert: Sie können mein Beispiel finden Sie hier.

Ihr Javascript-Code sucht nach: $('.context.example .ui.sidebar') aber in Ihrem HTML-Code gibt es keine Klasse verfügbar mit dem Namen: .context.example.

Daher wird es nicht funktionieren. Wenn Sie dies tun:

<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> 

Es wird funktionieren.