Question

这里我正在使用tab它很好，我想做一些额外的更改，在我的页脚页面我有4个链接，如果我点击该链接意味着URL应该像这样 ouroffice.php？cityname = chennai ，现在我想做的意思是基于cityname我想让标签处于活动状态我试过但是我无法使标签处于活动状态，怎么能这样做？

＆＃13;

//var cityname = '<?php echo $_GET['cityname']?>';
var cityname = "hydrabad";
if (cityname == "chennai") {
  $("#nv_li").tabs({
    active: 1
  });
} else if (cityname == "hydrabad") {
  $("#nv_li").tabs({
    active: 2
  });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" style="padding-top: 30px;">
  <ul class="nav nav-tabs" id="nv_li">
    <li class="active" id="link"><a data-toggle="tab" href="#beng">BENGALURU</a> 
    </li>
    <li id="link"><a data-toggle="tab" href="#chennai">CHENNAI</a>
    </li>
    <li id="link"><a data-toggle="tab" href="#hydrabad">HYDERABAD</a>
    </li>
    <li id="link"><a data-toggle="tab" href="#dubai">DUBAI</a>
    </li>
    <li id="link"><a data-toggle="tab" href="#london">LONDON</a>
    </li>
    <li><a data-toggle="tab" href="#kochi" style="border-right: 0px;">HONG KONG</a>
    </li>

  </ul>
  <div class="tab-content">
    <div id="beng" class="tab-pane fade in active">
      <?php include 'bangalore.php';?>
    </div>

    <div id="chennai" class="tab-pane fade">
      <?php include 'chhenai.php';?>
    </div>

    <div id="hydrabad" class="tab-pane fade">
      <?php include 'hyd.php';?>
    </div>

    <div id="kochi" class="tab-pane fade">
      <?php include 'kochi.php';?>
    </div>

    <div id="mumbai" class="tab-pane fade">
      <?php include 'mumbai.php';?>
    </div>

    <div id="pune" class="tab-pane fade">
      <?php include 'pune.php';?>
    </div>

    <div id="abu" class="tab-pane fade">
      <?php include 'abu_dhabi.php';?>
    </div>


    <div id="dubai" class="tab-pane fade">
      <?php include 'dubai.php';?>
    </div>

    <div id="london" class="tab-pane fade">
      <?php include 'london.php';?>
    </div>
  </div>
</div>

＆＃13;

Answer 1

只需使用window.location.search并运行函数（在文档就绪）将活动类设置为适当的li元素，如下所示：

// Search parameter extractor
function getSearchParam(searchKey) {
  var params = window.location.search.replace('?', '').split('&');
  var searchParam = null;
  var keyValue;

  for (var i = 0, len = params.length; i < len; i++) {
    keyValue = params[i].split('=');

    if (keyValue[0] === searchKey) {
        searchParam = keyValue[1];
        break;
    }
  }

  return searchParam;
}

// Function to set active city class
function setActiveCity(cityName) {
    var link = document.querySelector('a[data-toggle="tab"][href="#' + cityName + '"]');
    var content = document.getElementById(cityName);


  if (link) {
    link.parentNode.classList.add('active');
  }

  if (content) {
    content.classList.add('in', 'active');
  }
}

var city = getSearchParam('cityname');

if (city) {
  setActiveCity(city);
}

Answer 2

<ul id="navi">
<li><a class="menu" href="#">Pune</a></li>
<li><a class="menu" href="#">Baramati</a></li>
<li><a class="menu" href="#">chennai T</a></li>
<li><a class="menu" href="#">London</li>          
<li><a class="menu" href="#">UK</a></li>


$('a.menu').click(function(){
    $('a.menu').removeClass("active");
    $(this).addClass("active");
});

我希望。它会对你有所帮助！

如何根据URL使标签在jquery中处于活动状态

2 个答案: