2017-06-28 3 views
-2

時間、私は私のテンプレートメニューに私のアクションURLを設定したいが、私はどのように、これはこれはアクションURLですjvテンプレートを使用してmvcアプリケーションに参加する方法は?

<!-- Main Content --> 
<div class="lx-g1-f"> 
    <div class="lx-main-content"> 
     <div class="lx-g8-f lx-p-10"> 

      <!-- Main Menu --> 
      <div class="lx-main-menu lx-transparent"> 
       <i class="lnr lnr-menu"></i> 
       <ul> 
        <li><a href="javascript:;" class="active" data-title="lx-home" data-url="index-4.html#home"><i class="lnr lnr-home"></i>home</a></li> 
        <li><a href="javascript:;" data-title="lx-knowme" data-url="index-4.html#knowme"><i class="lnr lnr-user"></i>about me</a></li> 
        <li><a href="#skills" data-title="lx-skills" data-url="index-4.html#skills"><i class="lnr lnr-laptop"></i>proffes</a></li> 
        <li><a href="javascript:;" data-title="lx-resume" data-url="index-4.html#resume"><i class="lnr lnr-graduation-hat"></i>resume</a></li> 
        <li><a href="javascript:;" data-title="lx-projects" data-url="index-4.html#projects"><i class="lnr lnr-briefcase"></i> projects</a></li> 
        <li><a href="javascript:;" data-title="lx-blog" data-url="index-1.html#blog"><i class="lnr lnr-bullhorn"></i>blog</a></li> 
        <li><a href="javascript:;" data-title="lx-contact" data-url="index-4.html#contact"><i class="lnr lnr-envelope"></i>contact </a></li> 

       </ul> 
      </div> 
      <!-- End Main Menu --> 

_layout.cshtmlある には考えている:

 <li>@Html.ActionLink("Home", "Index", "Home")</li> 
    <li>@Html.ActionLink("About", "About", "Home")</li> 
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 

と、このindex.jsメニューセクションです:

// Main menu event : show correspondant section 
$(".lx-main-menu ul li a").on("click", function() { 

    var patt = /single-post/; 
    if(!patt.test(location.pathname)){ 
     // Remove active class from menus 
     $(".lx-main-menu ul li a").removeClass("active"); 
     // Set clicked menu active 
     $(this).addClass("active"); 
     // Hide all blocs 
     $(".lx-blocs").removeClass("active"); 
     // Show the correspondant bloc 
     $("."+$(this).attr("data-title")).addClass("active"); 
     // Update the url 
     history.pushState('data', '', $(this).attr("data-url")); 

     // If bloc skills load the progress bars 
     if($(this).attr("data-title") === "lx-skills"){ 
      for (var i = 0; i < $(".lx-bar", ".lx-bars-chart").length; i++) { 
       $(".lx-bar:eq(" + i + ") .lx-bar-counter").text($(".lx-bar:eq(" + i + ")").attr("data-max") + "%"); 
       $(".lx-bar:eq(" + i + ") .lx-bar-fill").css("width", $(".lx-bar:eq(" + i + ")").attr("data-max") + "%"); 
      } 
     } 
     else{ 
      for (var i = 0; i < $(".lx-bar", ".lx-bars-chart").length; i++) { 
       $(".lx-bar:eq(" + i + ") .lx-bar-counter").text("0%"); 
       $(".lx-bar:eq(" + i + ") .lx-bar-fill").css("width","0%"); 
      }  
     } 

     // Responsive Menu Hide 
     if($(window).width() <= 768){ 
      $(".lx-main-menu").css("left", "-116px"); 
      $(".lx-main-menu > i").attr("class", "lnr lnr-menu");  
     } 
    } 
}); 

この部分は私のINDEである私は私のCSSテンプレート に私のアクションURLへの参加を助けてくださいx.cshtml:

<div class="lx-home"> 
    <div class="lx-home-content"> 
     <div class="lx-home-overview"> 
      <h1> </h1> 
      <div class="line"></div> 
      <em></em> 
      <p></p> 
     </div> 
     <div class="lx-clear-fix"></div> 
     <div class="lx-home-buttons"> 

      <a href="#"></a> 
     </div> 
    </div> 
</div> 

このスタイルは、単一のページで、ビューは、このようなものです:

menu in the left side

menu item 3 opened as a window

これはhtmlページ

+0

正確には動作しません。あなたはこれらのリンクをどこに追加しようとしますか?試してみるとどうなりますか? – David

答えて

-1
<li><a [email protected]("~/controllerName/ActionMethod")"> class="active" data-title="lx-home" ><i class="lnr lnr-home"></i>home</a></li> 

でありますlayout.cshtmlあなたはこれをリンクしています。これが役立つことを願っています。

+0

投票した人は理由を説明してください。 –

関連する問題