نمایش نتایج 1 تا 2 از 2

نام تاپیک: active menu در بوت استرپ

  1. #1
    کاربر دائمی آواتار pary_daryayi
    تاریخ عضویت
    آذر 1391
    محل زندگی
    گرگان
    پست
    369

    active menu در بوت استرپ

    سلام دوستان . من یک منوی bootstrap دارم . این کد رو برای active نوشتم که روی هر لینک کلیک میکنیم اننخاب شده باشه ولی جواب نمیده.

    <script>
    $(document).ready(function(){
    $( '.navbar-nav a' ).on( 'click', function () {
    $( '.navbar-nav' ).find( 'li.active' ).removeClass( 'active' );
    $( this ).parent( 'li' ).addClass( 'active' );
    });
    });

    </script>


    , و کد html
    کد HTML:
     <ul class="navbar-nav ml-auto">	<li class="nav-item active">		<a class="nav-link " href="home.php">صفحه اصلی</a>	</li>	<li class="nav-item">		<a class="nav-link" href="about.php">درباره ما</a>	</li>	<li class="nav-item">		<a class="nav-link" href="contact.php">تماس با ما</a>	</li>	<li class="nav-item">		<a class="nav-link" href="#">قوانین و مقررات </a>	</li></ul>
    و کد css:

    .navbar-nav li.active > a {
    background-color: #333;
    color: #fff;
    }

  2. #2

    نقل قول: active menu در بوت استرپ

    سلام
    کد HTML :

    کد HTML:
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
      <style>
        
        .active {
        
          color :red;
        }
      </style>
    </head>
    <body>
      <ul class="nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
    </body>
    </html>
    کد JavaScript :

    $(document).ready(function(){
    $( '.nav-link' ).on( 'click', function () {
    $(".nav-link").each(function(index, item) {
    $(item).removeClass('active');
    });
    $(this).addClass('active');
    });
    });


    امیدوارم کمکتون بکنه میتونید آنلاین هم کد رو ببینید اگر نیومد از قند شکن استفاده کنید ������
    در این لینک :
    https://jsfiddle.net/hg1etcan/23/
    موفق باشین.


تاپیک های مشابه

  1. سوال: تفاوت Active X و DLL و OCX
    نوشته شده توسط Override@ در بخش Access
    پاسخ: 3
    آخرین پست: دوشنبه 06 مهر 1394, 07:06 صبح
  2. سوال: active Menu
    نوشته شده توسط cyber_world در بخش طراحی وب (Web Design)
    پاسخ: 0
    آخرین پست: پنج شنبه 05 شهریور 1388, 12:40 عصر
  3. تفاوت رويداد active با create
    نوشته شده توسط mandana2010 در بخش بانک های اطلاعاتی در Delphi
    پاسخ: 6
    آخرین پست: یک شنبه 21 مهر 1387, 19:17 عصر
  4. تفاوت Active کردن با Open کردن جداول چیست؟
    نوشته شده توسط nasr در بخش بانک های اطلاعاتی در Delphi
    پاسخ: 2
    آخرین پست: پنج شنبه 03 آبان 1386, 14:35 عصر

قوانین ایجاد تاپیک در تالار

  • شما نمی توانید تاپیک جدید ایجاد کنید
  • شما نمی توانید به تاپیک ها پاسخ دهید
  • شما نمی توانید ضمیمه ارسال کنید
  • شما نمی توانید پاسخ هایتان را ویرایش کنید
  •