Function that when clicking open a respective ul on another page

Question

Function that when clicking open a respective ul on another page

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

By clicking on a category like the image below, you are redirected to another page,

Whenyouareusingyourcomputer,itopenslikethis:

Butitisalsonecessarytouseitinmobilephones,butwhenitisresponsiveitisnecessarytoclickagainonthecategorynamesothatitopensandshowsinformation.

Afterclickingagain:

Icannotchangeanythinginthesourcecodebecausemybossdidnotauthorizedoingthis:(,itonlywantsafunctionthatwhenchoosingitscategoryandbeingredirected,thiscategoryisalreadyopenfortheuserwithouthavingtoclickagaintoopen.

Belowispartofthesourcecodetohelpyouunderstand:

index.html(Firstimage):

<divclass="main-content">
  <div class="w3-categories">
    <h3>Browse Categories</h3>
    <div class="container">
      <div class="col-md-3">
        <div class="focus-grid w3layouts-boder1">
          <a class="btn-8" href="categories.html">
            <div class="focus-border">
              <div class="focus-layout">
                <div class="focus-image"><i class="fa fa-mobile"></i></div>
                <h4 class="clrchg">Mobiles</h4>
              </div>
            </div>
          </a>
        </div>
      </div>
      <div class="col-md-3">
        <div class="focus-grid w3layouts-boder2">
          <a class="btn-8" href="categories.html#parentVerticalTab2">
            <div class="focus-border">
              <div class="focus-layout">
                <div class="focus-image"><i class="fa fa-laptop"></i></div>
                <h4 class="clrchg"> Electronics & Appliances</h4>
              </div>
            </div>
          </a>
        </div>
      </div>
      <div class="col-md-3">
        <div class="focus-grid w3layouts-boder3">
          <a class="btn-8" href="categories.html#parentVerticalTab3">
            <div class="focus-border">
              <div class="focus-layout">
                <div class="focus-image"><i class="fa fa-car"></i></div>
                <h4 class="clrchg">Cars</h4>
              </div>
            </div>
          </a>
        </div>
      </div>

Categories.html (Second / third image):

<div class="categories-section main-grid-border">
  <div class="container">
    <h2 class="w3-head">All Categories</h2>
    <div class="category-list">
      <div id="parentVerticalTab">
        <div class="agileits-tab_nav">
          <ul class="resp-tabs-list hor_1">
            <li>Mobiles</li>
            <li>Electronics & Appliances</li>
            <li>Cars</li>
            <li>Bikes</li>
            <li>Furniture</li>
            <li>Pets</li>
            <li>Books, Sports & Hobbies</li>
            <li>Fashion</li>
            <li>Kids</li>
            <li>Services</li>
            <li>Jobs</li>
            <li>Real Estate</li>
          </ul>
          <a class="w3ls-ads" href="all-classifieds.html">View all Ads</a>
        </div>
        <div class="resp-tabs-container hor_1">
          <div>
            <div class="category">
              <div class="category-img">
                <img src="images/cat1.png" title="image" alt="" />
              </div>
              <div class="category-info">
                <h4>Mobiles</h4>
                <span>5,12,850 Ads</span>
                <a href="all-classifieds.html">View all Ads</a>
              </div>
              <div class="clearfix"></div>
            </div>
            <div class="sub-categories">
              <ul>
                <li><a href="mobiles.html">mobile phones</a></li>
                <li><a href="mobiles.html">Tablets</a></li>
                <li><a href="mobiles.html">Accessories</a></li>
              </ul>
            </div>
          </div>
          <div>
            <div class="category">
              <div class="category-img">
                <img src="images/cat2.png" title="image" alt="" />
              </div>
              <div class="category-info">
                <h4>Electronics & Appliances</h4>
                <span>2,01,850 Ads</span>
                <a href="all-classifieds.html">View all Ads</a>
              </div>
              <div class="clearfix"></div>
            </div>
            <div class="sub-categories">
              <ul>
                <li><a href="electronics-appliances.html">Computers & accessories</a></li>
                <li><a href="electronics-appliances.html">Tv - video - audio</a></li>
                <li><a href="electronics-appliances.html">Cameras & accessories</a></li>
                <li><a href="electronics-appliances.html">Games & Entertainment</a></li>
                <li><a href="electronics-appliances.html">Fridge - AC - Washing Machine</a></li>
                <li><a href="electronics-appliances.html">Kitchen & Other Appliances</a></li>
              </ul>
            </div>
          </div>
          <div>

Thanks in advance for your help! :)

javascript html5

asked by anonymous 05.03.2018 / 16:00

2 answers

0

A very simple way, you will need to change only one thing in the menu links:

<a class="btn-8" href="categories.html?cat=Mobiles"> <!-- Passar via get a categoria -->
    <div class="focus-border">
        <div class="focus-layout">
            <div class="focus-image"><i class="fa fa-mobile"></i></div>
            <h4 class="clrchg">Mobiles</h4>
        </div>
    </div>
</a>

And the function:

var li = document.getElementsByTagName('li') // Pega todos <li>
var cat = '<?php echo $_GET["cat"]; ?>' // Cria a variável cat com o valor passado por get 

//Loop passando por todos <li>
for(var i = 0; i < li.length; i++) {
    // Se o texto do li for igual ao texto passado por get chama o evento de click
    if(li[i].innerText == cat)
        li[i].click()
}

Note: The text passed by get must equal the text of <li>

If you can put id in the li is easier:

var cat = '<?php echo $_GET["cat"]; ?>'
var li = document.getElementById(cat)
li.click()

05.03.2018 / 16:36

E-mail sending .php does not redirect page How to edit cells from an excel file from the npm xlsx library

score 0 · Accepted Answer

Follow the referral link: link

I was able to solve using this script, below if anyone needs it.

You just need to comment clossed: 'accordion'

 <script type="text/javascript">
        $(document).ready(function() {

            //Vertical Tab
            $('#parentVerticalTab').easyResponsiveTabs({
                type: 'vertical', 
                width: 'auto', 
                fit: true, 
                //closed: 'accordion', 
                tabidentify: 'hor_1', // The tab groups identifier
                activate: function(event) { // Callback function if tab is switched
                    var $tab = $(this);
                    var $info = $('#nested-tabInfo2');
                    var $name = $('span', $info);
                    $name.text($tab.text());
                    $info.show();
                }
            });
        });
    </script>