I have created a multilevel dropdown which is dynamic. When I am clicking the third level item(new, in progress, resolved which are from the database)it should be selected and only when I am clicking the create button that selected item data should be passed to the controller.
multilevel dropdown code
<div class="dropdown drop">
<button class="btn dropdown-toggle"
type="button"
id="dropdownMenuButton"
data-mdb-toggle="dropdown"
aria-expanded="false">
STATUS
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li>
<a class="dropdown-item" href="#">
ProjectStatus »
</a>
<ul class="dropdown-menu dropdown-submenu">
#foreach (var i in ViewBag.ProjectStatus)
{
<li>
#*<a id="ProjectStatus" class="dropdown-item" href="#">#i.Text</a>*#
<select asp-for="ProjectStatus" class="form-control" value="#i.Text">#i.Text</select>
</li>
}
</ul>
</li>
<li>
<a class="dropdown-item" href="#">
DevelopmentStatus »
</a>
<ul class="dropdown-menu dropdown-submenu">
#foreach (var i in ViewBag.DevelopmentStatus)
{
<li>
<a class="dropdown-item" href="#">#i.Text</a>
</li>
}
</ul>
</li>
</ul>
</div>
HttpGet create method
public IActionResult Create()
{
ViewBag.ProjectStatus = new SelectList(_context.ProjectStatus, "ProjectStatusID", "Status");
ViewBag.DevelopmentStatus = new SelectList(_context.DevelopmentStatus, "DevelopmentStatusID", "Status");
return View();
}
Need to get the selected list item data to the post method
[HttpPost]
public async Task<IActionResult> Create(Projects ec) {}
You can try to put the selected item value to a hidden input,and then change the background of the <li></li>.Here is a demo:
<div class="dropdown drop">
<button class="btn dropdown-toggle"
type="button"
id="dropdownMenuButton"
data-mdb-toggle="dropdown"
aria-expanded="false">
STATUS
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li>
<a class="dropdown-item" href="#">
ProjectStatus »
</a>
<ul class="dropdown-menu dropdown-submenu">
#foreach (var i in ViewBag.ProjectStatus)
{
<li>
<a class="dropdown-item" href='#' onclick='return change("#i.Text",this,"ProjectStatus")'>#i.Text</a>
</li>
}
</ul>
</li>
<li>
<a class="dropdown-item" href="#">
DevelopmentStatus »
</a>
<ul class="dropdown-menu dropdown-submenu">
#foreach (var i in ViewBag.DevelopmentStatus)
{
<li>
<a class="dropdown-item" href='#' onclick='return change("#i.Text",this,"DevelopmentStatus")'>#i.Text</a>
</li>
}
</ul>
</li>
</ul>
</div>
<input id="ProjectStatus" name="ProjectStatus" hidden />
<input id="DevelopmentStatus" name="DevelopmentStatus" hidden />
<script>
function change(text, t, type) {
$("li").css("background", "transparent");
if (type == "ProjectStatus") {
$("#ProjectStatus").val(text);
$("#DevelopmentStatus").val("");
} else {
$("#DevelopmentStatus").val(text);
$("#ProjectStatus").val("");
}
$(t).parent().css("background", "#1266f1");
return false;
}
</script>
When select ProjectStatus,the selected value will be put to $("#ProjectStatus"),and the value of $("#DevelopmentStatus") will be "".When select DevelopmentStatus,the selected value will be put to $("#DevelopmentStatus"),and the value of $("#ProjectStatus") will be "".
result:
Related
I try create dynamic menu but i have problem with adding parameters in link to the controller and action, can i add parameter to url.content? or there are the other way please give your insight it will very helpfull
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Menu Example</a>
</div>
<ul class="nav navbar-nav">
#if (Session["Menu"] != null)
{
var MenuMaster = (List<Accountstatement.Models.MenuModel>)Session["Menu"];
var groupByMenu = MenuMaster.GroupBy(x => x.MainMenuName).ToList();
foreach (var MenuList in groupByMenu)
{
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">#MenuList.Key<span class="caret"></span></a>
<ul class="dropdown-menu">
#foreach (var SubMenuList in MenuList)
{
<li>#SubMenuList.SubMenuName</li>
}
</ul>
</li>
}
}
</ul>
this is the part the url.content is, how can i put the parameter inside url.content?
<li>#SubMenuList.SubMenuName</li>
Use #Html.Raw with Url.Content and pass parameters like below:
#Html.Raw(Url.Content("~/"+#SubMenuList.ControllerName +"/"+ #SubMenuList.ActionName?param=" + param.value))
trying to make a drop once click on the html action, works with anchor tag
As per below it works with
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#auth" aria-expanded="false" aria-controls="auth">
<p>Testing<span class="dropdown-toggle"></span> </p>
</a>
<div class="collapse" id="auth">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="pages/samples/login.html"> Home 1 </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/login-2.html"> Home 2 </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/register.html"> Home 3 </a></li>
</ul>
</div>
</li>
working with tag
as per below does not work.\
<li class="nav-item dropdown" id="User">
<i class="fas fa-user-edit " style="margin-left: 30px;margin-top: 6px;"> </i>
#Html.ActionLink("User Management", "Index", "Users", null, new { #class = "nav-link dropdown-toggle", data_toggle = "dropdown", aria_expanded = "false" })
<div class="collapse">
<ul class="nav flex-column sub-menu">
<li>
<a class="nav-link">Home 1</a>
</li>
<li>
<a class="nav-link">Home 2</a>
</li>
<li>
<a class="nav-link">Home 3</a>
</li>
</ul>
</div>
</li>
var driver = new ChromeDriver();
driver.Navigate().GoToUrl("https://www.favorit.com.ua/uk/live/");
string myTime = driver.FindElement(By.XPath("/html/body/div[#class='wrapper']/" +
"div[#class='contentdiv']/" +
"div[#id='middle']/" +
"div[#id='container']/" +
"div[#id='content']/" +
"div[#class='content clear-block bet_a_c']/" +
"div[#id='livediv']/" +
"div[#class='selected--sport--block']/" +
"div[#class='view-wrapper']/" +
"ul[#class='sport--list']/" +
"li[#class='sport--block']/" +
"ul[#class='category--list--block']/" +
"li[#class='category--block sp_1']/" +
"ul[#class='events--list']/" +
"li['']/" +
"ul[#class='event--head-block']/" +
"div[#class='event--head']/" +
"div[#class='event--short--info']/" +
"div[#class='time--block']/" +
"div[#class='headerdiv']/" +
"div[#class='event--timer']")).GetAttribute("innerHTML");
Console.WriteLine(myTime);
Console.ReadLine();
Hello everybody. I just started to learn selenium and collided with the issue of finding an element. I want to get the value of the timer, but it is unsuccessful. I bet my problem is that I am making mistake in XPath at line
"li['']/" +
Do you have an idea how can I get it in a correct way?
I am going to get value '45:00'
from <div class="event--timer">45:00</div>
Oh, by the way when I start debugging my project Chrome browser starts twice. I don't know why, but it happens each time.
Thank you in advance for any suggests.
<body class="tm_18 uk " data-gr-c-s-loaded="true" style="">
<noscript>
<div id="noscript">Будь ласка, увімкніть JavaScript у вашому браузері!</div>
</noscript>
<a id="topsite" name="topsite"></a>
<div id="dialog" title=""></div>
<div id="dialogPre">
<!-- react-empty: 1 -->
</div>
<div id="full_vers" style="display:none;">
<button class="close" rel="fullcls">close</button>
<div class="full_blok">
<p>
Вы перешли на полную версию сайта.
Хотите запомнить Ваш выбор для следующего посещения сайта?
<button rel="fullyes" class="btn-chs">Так</button>
<button rel="fullno" class="btn-chs">Ні</button>
</p>
</div>
<div class="cl"></div>
</div>
<div class="wrapper">
<div class="header">
<div class="headerdiv">
<div class="logo">
<img src="./Фаворит спорт - Зробити ставку. Компанiя_files/blank.gif" alt="" id="logo">
</div>
<div id="counterPl" class="counter--playing" style="display:none;"></div>
<div class="head--block">
<div class="nav--block" style="overflow: visible;">
<ul class="nav--level--1">
<li>
<a href="https://www.favorit.com.ua/uk/bets/" class="service_id_1">
<span class="">СПОРТ</span>
</a>
<button class="sub--level--yes"><i class="fa fa-caret-down"></i></button>
<ul class="nav--level--2">
<li>
<a href="https://www.favorit.com.ua/uk/bets/results/" class="service_id_1">
<span class="">Результати</span>
</a>
</li>
<li>
<a href="javascript:openPopup('12345','http://stats.betradar.com/s4/?clientid=509&language=ukr');" class="service_id_1">
<span class="">Статистика</span>
</a>
</li>
</ul>
<div id="vip-dropdown">
<!-- react-empty: 1 -->
</div>
</li>
<li>
<a href="https://www.favorit.com.ua/uk/live/" class="service_id_1 active">
<span class="">Live</span>
<b>159</b></a>
<button class="sub--level--yes"><i class="fa fa-caret-down"></i></button>
<ul class="nav--level--2">
<li>
<a href="https://www.favorit.com.ua/uk/live/calendar/" class="service_id_1">
<span class="">Календар Live</span>
</a>
</li>
<li>
<a href="javascript:openPopup('123459','http://ls.betradar.com/ls/livescore/?/favoritbetua/ukr/page');" class="service_id_1">
<span class="">Результати Live</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/uk/page/favoritsporttv/" class="service_id_1">
<span class="">Прямі трансляції</span>
</a>
</li>
</ul>
</li>
<li>
<a href="https://www.favorit.com.ua/uk/page/virtual/" class="service_id_1">
<span class="">Віртуальний спорт</span>
</a>
<button class="sub--level--yes"><i class="fa fa-caret-down"></i></button>
<ul class="nav--level--2">
<li>
<a href="https://www.favorit.com.ua/uk/vfl/" class="service_id_1">
<span class="null">Віртуальна футбольна ліга</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/ncup/" class="service_id_1">
<span class="">Кубок націй</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/uk/vto/" class="service_id_1">
<span class="">Віртуальний теніс</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/uk/vbl/" class="service_id_1">
<span class="">Віртуальний баскетбол</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/virtual-games/?category_id=36334" class="service_id_1">
<span class="new">Конячі перегони</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/virtual-games/?category_id=36335" class="service_id_1">
<span class="new">Футбол</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/virtual-games/?category_id=36338" class="service_id_1">
<span class="new">Коняча Рулетка</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/virtual-games/?category_id=36339" class="service_id_1">
<span class="new">Настільний теніс</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/virtual/?category_id=1559" class="service_id_1">
<span class="">Віртуальний футбол</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/uk/virtual/" class="service_id_1">
<span class="new">Віртуальний спорт від Inspired</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/virtual/?category_id=35937" class="service_id_1">
<span class="">Віртуальні Мотогонки</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/virtual/?category_id=35938" class="service_id_1">
<span class="">Віртуальні Велоперегони</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/virtual/?category_id=35939" class="service_id_1">
<span class="">Віртуальні Скачки</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/virtual/?category_id=35941" class="service_id_1">
<span class="">Віртуальні Собачі перегони</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/virtual/?category_id=36097" class="service_id_1">
<span class="">Віртуальна Формула 1</span>
</a>
</li>
</ul>
</li>
<li>
<a href="https://www.favorit.com.ua/uk/casino/" class="service_id_1">
<span class="new">Казино</span>
</a>
<button class="sub--level--yes"><i class="fa fa-caret-down"></i></button>
<ul class="nav--level--2">
<li>
<a href="https://www.favorit.com.ua/uk/page/casino/cashrace/" class="service_id_1">
<span class="new">Гонка призових</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/uk/page/casino/rating/" class="service_id_1">
<span class="">Рейтинг</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/uk/page/casino/winners/" class="service_id_1">
<span class="">Переможці</span>
</a>
</li>
</ul>
</li>
<li>
<a href="https://www.favorit.com.ua/uk/live-casino/" class="service_id_1">
<span class="">Казино LIVE</span>
</a>
<button class="sub--level--yes"><i class="fa fa-caret-down"></i></button>
<ul class="nav--level--2">
<li>
<a href="https://www.favorit.com.ua/uk/page/live-casino/tips-and-strategy/" class="service_id_1">
<span class="">Поради та Стратегія</span>
</a>
</li>
</ul>
</li>
</ul>
<button class="menu_button">
<div class="toggle_switch"><span></span><span></span><span></span></div>
</button>
<ul class="nav-dop-menu">
<li>
<a href="https://www.favorit.com.ua/uk/tvloto/" class="service_id_1">
<span class="">ТВ ЛОТО</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/uk/page/main_promo/" class="service_id_1">
<span class="">Акції</span>
</a>
</li>
</ul>
</div>
</div>
<div class="user--block">
<script id="usermessagewc" type="text/x-jsrender">
<div class="u_msg_tci">
Total critical/important messages <span rel="count">0</span>
</div>
<div class="u_msg_txt">
[[:text]]
</div>
</script>
<script id="usermessage" type="text/x-jsrender">
<div class="u_msg_dt">[[:dt_sesent]]</div>
<div class="u_msg_bl">
<div class="u_msg_subject">[[:subject]]</div>
<div class="u_msg_bd">[[:message]]</div>
</div>
</script>
<div id="user-block">
<div data-reactroot="" class="loginbgL">
<div class="loginbgR">
<div class="loginicon">
<div id="nauth">
<div class="not_login">
<a class="loginpagecl but-blue-1"><span>Увійти</span></a>
<div class="but-red-1" rel="mdlreg"><span>Реєстрація</span></div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<script src="./Фаворит спорт - Зробити ставку. Компанiя_files/loginUser.js.download" type="text/javascript" charset="utf-8"></script>
</div>
</div>
<div class="second--menu">
<div class="settings--block">
<div id="timeplace" class="times_place">
<div data-reactroot="" class="times">
<p>20:20 (UTC +3)</p>
<div></div>
</div>
</div>
</div>
</div>
</div>
<div class="contentdiv">
<div id="middle">
<div id="container">
<div id="content">
<div class="content clear-block bet_a_c">
<div class="badwe" style="display:none;">
<div class="entire">
<div class="close"></div>
<div class="lst-err">
<ul>
<li>Unknown error</li>
</ul>
</div>
</div>
</div>
<div id="scenter"></div>
<div id="video_player"></div>
<div id="video_modal_auth"></div>
<div id="livediv" class="livediv">
<div data-reactroot="" class="selected--sport--block">
<div class="message--widget">
<div class="message--content new--user">
<i class="fa"></i><!-- react-text: 5 -->Новий користувач?<!-- /react-text --><span>Зареєструйтесь</span><b>та отримайте бонус ''Ставка без ризику'' до 500 грн!</b>
</div>
<div class="close--buton"><span>Закрити</span><i class="fa"></i></div>
</div>
<!-- react-empty: 11 -->
<div class="view-wrapper">
<ul class="sport--list">
<li class="sport--block">
<div class="sport--head sp--bg sp_1 head--folding folding--open">
<i class="sporticon sp_1"></i>
<span>
<!-- react-text: 25 -->Футбол<!-- /react-text --><u>83</u>
</span>
<b>Показати все</b>
</div>
<ul class="category--list--block">
<li class="category--block sp_1">
<div class="caterory--head">
<div class="outcomes--name">
<div class="category--name"><i class="sporticon sp--color sp_1"></i><span>Футбол | Іспанія | Ла Ліга</span></div>
<ul class="count--label count-0 outcome-count-3">
<li title="1">1</li>
<li title="X">X</li>
<li title="2">2</li>
</ul>
<ul class="count--label count-1 outcome-count-3 has-param">
<li title="1">1</li>
<li>Фора</li>
<li title="2">2</li>
</ul>
<ul class="count--label count-2 outcome-count-3 has-param">
<li title="Б">Б</li>
<li>Тотал</li>
<li title="М">М</li>
</ul>
<div class="close--category"></div>
</div>
</div>
<ul class="events--list">
<li>
<div class="event--head-block">
<u></u>
<div class="event--head event-has-description">
<div class="event--short--info">
<div class="event--line--position"><span>3371</span><b>1489</b></div>
<div class="time--block">
<div class="event--timer">45:00</div>
</div>
<div class="event--result--type--name">П2</div>
</div>
Can you try with below xpath
"/html/body/div[4]/div[2]/div/div/div/div/div[5]/div/div[2]/ul/li/ul/li/ul/li/div/div/div/div[2]/div"
What about simple //div[#class='event--timer'] ?
string myTime = driver.FindElement(By.XPath("//div[#class='event--timer']")).GetAttribute("innerHTML");
I'm able to make just two level Menu from database How can I make it up to three level or more
I've seen a lot of tutorials but they all are to much of complex
Here is what I've done so far
My Action
public ActionResult SideMenu()
{
ViewBag.MenuLevelTest = Db
.Menus
.Where(menu => menu.ParentId == null)
.ToList();
return PartialView("_SideMenu");
}
My View
<ul class="page-sidebar-menu page-header-fixed page-sidebar-menu-hover-submenu " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
#foreach (var menuLevelTest in ViewBag.MenuLevelTest)
{
<li class="nav-item start">
<a href="javascript:;" class="nav-link nav-toggle">
<i class="icon-home"></i>
<span class="title">#menuLevelTest.Name</span>
<span class="arrow"></span>
</a>
#if (menuLevelTest.Menu1.Count > 0)
{
<ul class="sub-menu">
#foreach (var menuLevelTest2 in menuLevelTest.Menu1)
{
<li class="nav-item start ">
<a href="index.html" class="nav-link ">
<i class="icon-bar-chart"></i>
<span class="title">#menuLevelTest2.Name</span>
</a>
</li>
}
</ul>
}
</li>
}
</ul>
I've tried to extend it by doing this but it does not work, what is the easiest way to make this happen
<ul class="page-sidebar-menu page-header-fixed page-sidebar-menu-hover-submenu " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
#foreach (var menuLevelTest in ViewBag.MenuLevelTest)
{
<li class="nav-item start">
<a href="javascript:;" class="nav-link nav-toggle">
<i class="icon-home"></i>
<span class="title">#menuLevelTest.Name</span>
<span class="arrow"></span>
</a>
#if (menuLevelTest.Menu1.Count > 0)
{
<ul class="sub-menu">
#foreach (var menuLevelTest2 in menuLevelTest.Menu1)
{
<li class="nav-item">
<a href="javascript:;" class="nav-link nav-toggle">
<i class="icon-bar-chart"></i>
<span class="title">#menuLevelTest2.Name</span>
</a>
#if (menuLevelTest.Menu2.Count > 0)
{
<ul class="sub-menu">
#foreach (var menuLevelTest3 in menuLevelTest.Menu2)
{
<li class="nav-item">
<a href="javascript:;" class="nav-link nav-toggle">
<i class="icon-bar-chart"></i>
<span class="title">#menuLevelTest3.Name</span>
</a>
</li>
}
</ul>
}
</li>
}
</ul>
}
</li>
}
</ul>
This is how I Achieved the three levels
Created a BaseController
got the list of All menus
public BaseController()
{
ViewBag.Menu = MenuList();
}
private IList<Menu> MenuList()
{
var list = Db.Menus.ToList();
return list;
}
Here is my Razor for partial View
#{
List<MisNew.Web.EntityModel.Menu> menuList = ViewBag.Menu;
}
<ul class="menu page-sidebar-menu page-header-fixed page-sidebar-menu-hover-submenu " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
#foreach (var mp in menuList.Where(p => p.ParentId == null))
{
<li class="#mp.ListCss">
<a href="#" class="#mp.HyperLinkCss">
<i class="#mp.IconCss"></i>
<span class="title">#mp.Name</span>
<span class="arrow"></span>
</a>
#if (menuList.Count(p => p.ParentId == mp.Id) > 0)
{
#:<ul class="sub-menu">
}
#RenderMenuItem(menuList, mp)
#if (menuList.Count(p => p.ParentId == mp.Id) > 0)
{
#:</ul>
}
</li>
}
</ul>
#helper RenderMenuItem(List<MisNew.Web.EntityModel.Menu> menuList, MisNew.Web.EntityModel.Menu mi)
{
foreach (var cp in menuList.Where(p => p.ParentId == mi.Id))
{
#:<li class="#cp.ListCss">
<a href="~/#cp.Url">
<i class="#cp.IconCss"></i>
<span class="title">#cp.Name</span>
<span class="arrow"></span>
</a>
if (menuList.Count(p => p.ParentId == cp.Id) > 0)
{
#:<ul class="sub-menu">
}
#RenderMenuItem(menuList, cp)
if (menuList.Count(p => p.ParentId == cp.Id) > 0)
{
#:</ul>
}
else
{
#:</li>
}
}
}
I'm having a hard time to make <li> class to active when page is loaded. Here's my scenario I copied a sample Dropdown in a certain website to integrate it in my website. I'm using C# Asp.Net
_Layout.cshtml
<body>
<div id="header">
#Html.Partial("_HeaderPartial")
</div>
<!--SIDEBAR Navigation-->
<aside id="menu">
// The Dropdown
#Html.Partial("_SidebarPartial")
</aside>
<div id="wrapper">
#RenderBody()
<footer class="footer">
#Html.Partial("_FooterPartial")
</footer>
</div>
<div id="right-sidebar" class="animated fadeInRight">
#Html.Partial("_RightSidebarPartial")
</div>
</body>
_SidebarPartial
<ul class="nav" id="side-menu">
<li>
<span class="nav-label">Dashboard</span>
</li>
<li>
<span class="nav-label">Analytics</span>
</li>
<li>
<span class="nav-label">Interface</span><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>Panels design</li>
<li>Typography</li>
<li>Colors & Buttons</li>
<li>Components</li>
<li>Alerts</li>
<li>Modals</li>
</ul>
</li>
<li>
<span class="nav-label">App views</span><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>Contacts</li>
<li>Projects</li>
<li>Project detail</li>
<li>App plans</li>
<li>Social board</li>
</ul>
</li>
<li>
<span class="nav-label">Charts</span><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>ChartJs</li>
<li>Flot charts</li>
<li>Inline graphs</li>
</ul>
</li>
<li>
<span class="nav-label">Box transitions</span><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li><span class="label label-success pull-right">Start</span> Overview </li>
<li>Columns from up</li>
</ul>
</li>
</ul>
As I commented, here is a small example with an id attribute on the list:
<ul class="nav" id="side-menu">
<li id="interfaces">
<span class="nav-label">Interface</span><span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>Panels design</li>
<li>Typography</li>
<li>Colors & Buttons</li>
<li>Components</li>
<li>Alerts</li>
<li>Modals</li>
</ul>
</li>
</ul>
And then you could add the following line to the document.ready function:
$("#interfaces").attr("class", "active");
Check this out. This will also help you
just write the following code inside document.ready function
$('#interfaces').addClass('active');
Cheers