语义UI-标签/显示网址

时间:2018-11-02 13:17:59

标签: javascript tabs semantic-ui

希望有人可以提供帮助。

我正在使用SUI的标签组件,并且一切正常,但是,当单击标签时,我希望更改URL以反映每个标签,以便可以在Google Analytics(分析)中单独跟踪它们。它是一个单页应用程序,其主页结构以/ dashboard的形式加载,每个选项卡在单击时从/ dashboard / data-tab-name远程加载,但该网址仅在浏览器中显示/ dashboard,因此Google Analytics(分析)只会进行选择一个网址,而应用程序上有5个单独的标签。

如何更改设置以使url反映正在查看的标签?

HTML:

<div id="infotabs">
   <div class="ui tabular menu">   
        <div class="ui container backfill">
          <a class="item active tabby" data-tab="live"><i class="large home icon"></i><span class="mobile hidden">Live Power</span></a>
          <a class="item tabby"  data-tab="yesterday"><i class="large chart bar icon"></i><span class="mobile hidden">Yesterday</span></a>
          <a class="item tabby" data-tab="balance"><i class="large balance scale icon"></i><span class="mobile hidden">Balance</span></a>
          <a class="item tabby" data-tab="historic"><i class="large history icon"></i><span class="mobile hidden">Historic</span></a>
          <a class="item tabby community" data-tab="community"><i class="large users icon"></i><span class="mobile hidden">Community</span></a>
          <div class="right item prop-info hidden" id="prop-number">Prop Ref: <%=currentUser.number %></div>            
        </div>  
   </div>
</div>

<div class="ui tab basic active segment" data-tab="live"></div>
<div class="ui tab basic segment" data-tab="yesterday"></div>
<div class="ui tab basic segment" data-tab="balance"></div>
<div class="ui tab basic segment" data-tab="historic"></div>
<div class="ui tab basic segment" data-tab="community"></div> 

JS:

   $('#infotabs .menu .item')
     .tab({
       evaluateScripts : true,
       auto: true,
       path: '/dashboard/',
       ignoreFirstLoad: false,
       alwaysRefresh: false,
       onRequest: function(){
         var panel = document.getElementById('loading-panel');
         if(panel.innerHTML === '') {
           panel.innerHTML = '<h3 class=\"loader-message\">Loading data - may take a few seconds...</h3>'
         }
       },
       onLoad: function(){
        var panel = document.getElementById('loading-panel');
        panel.innerHTML = ''
       }
  });

  $('#infotabs .menu .item').tab('change tab', 'live');

预先感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

我知道了,使用Asual地址库(V1.5)https://github.com/asual/jquery-address,并且不支持将jQuery版本降级为1.8.3和1.9及更高版本:

caller()

在JS设置中,history&historyType:

<?php
/**
 * Apache Splunk script to verify if auth is required or not
 * Version : 1.0
 */
ini_set('memory_limit', '800M'); // Set ram limit
require('zebracurl.php');

if($argc === 3){
    $file = $argv[1];
    if(is_readable($file)){
        $handle = fopen($file, 'r');
        if ($handle){
            $i = 0;
            $curl = new Zebra_cURL();
            $line_id = 0;
            $total_lines = count_lines(__DIR__.DIRECTORY_SEPARATOR.$file);
            $url_to_check = array();
            $curl->threads = 100;
            $curl->option(array(CURLOPT_TIMEOUT => 20));
            echo 'Welcome in Apache Splunk detector'.PHP_EOL;
            echo '[!] Total lines to parse in '.$file.': '.$total_lines.PHP_EOL;
            echo '--------------------------------------------------------------------------------'.PHP_EOL;
            while (($uri = fgets($handle)) !== false){
                if (!empty($uri) ){
                    $url_to_check[] = trim($uri).':'.$argv[2].'/splunk/en-US/manager/search/apps/local';
                    if ($i === 99 || $line_id + 1 === $total_lines){
                        $curl->get($url_to_check, function($request){
                            if ($request->response[1] == CURLE_OK && $request->info['http_code'] === 200){
                                for ($_i = 0; $_i < count($request->headers['responses']); $_i++){
                                    $header_array = array_change_key_case($request->headers['responses'][$_i], CASE_LOWER);
                                    if (isset($header_array['Server'])){
                                        file_put_contents('results.txt', $request->info['original_url'].PHP_EOL,FILE_APPEND | LOCK_EX);
                                        echo '[+] '.$request->info['original_url'].PHP_EOL;
                                    }
                                }
                            }
                        });
                        $i = 0;
                        $url_to_check = array();
                    }
                }
                $i++;
                $line_id++;
            }
        } else {
            echo setColor('An error was occurred on file opening '.$config['input_file'], $with_color ? 'danger' : '').PHP_EOL;
            fclose($handle);
            unset($curl);
            die();
        }
        fclose($handle);
        unset($curl);
    }
}else { echo '[!] Usage: php splunk-detector.php LAN-IPs.txt 8000'; }

function count_lines($file){
    $total_lines = 0;
    if (file_exists($file)){
        $handle = fopen($file, "r");
        while (!feof($handle)){ if (fgets($handle) !== false) $total_lines += 1; }
        fclose($handle);
    } return $total_lines;
}

然后可以将Google Analytics(分析)配置为识别哈希历史记录网址,例如/ dashboard#/ live,/ dashboard#/ yesterday等