html tag 와 js 처리부분이 연결되어 있으니 한곳만 수정하면 작동이 안됩니다. 

js 부분은 간단히 몇줄로 압축이 가능하지만

이것을 풀어서 코딩하고 동작시키는데 며칠이 걸렸습니다;

css

<style>
	.tabs_wrapper {
		-moz-box-shadow: 0 0 2px #ccc;
		-webkit-box-shadow: 0 0 2px #ccc;
		box-shadow: 0 0 2px #ccc;

		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;

		background-color: #fafafa;
	
		margin: 1px 1px 3px 1px;
		padding: 1px 1px 1px 1px;
	}

	.tabs_contents_container {
		border: 1px solid #ccc;
		border-top: none;
		padding: 3px;
	}

	.tab_contents {
		display: none;
	}

	.tabs_container {
		border-bottom: 1px solid #ccc;
	}

	.tabs_pull_right {
		float: right !important;
		right: 0;
		left: auto;
		margin-right: 0;
		position: relative;
		display: inline-block;
		vertical-align: middle;
	}

	.tabs {
		list-style: none;
		padding: 5px 0 4px 0;
		margin: 0 0 0 10px;
		font: 0.75em arial;
	}

	.tabs div span {
		display: inline;
		background-color: #eeeeee;
	}

	.tabs li {
		display: inline;
	}

	.tabs li a {
		border: 1px solid #ccc;
		padding: 4px 6px;
		text-decoration: none;
		background-color: #eeeeee;
		border-bottom: none;
		outline: none;
		border-radius: 5px 5px 0 0;
		-moz-border-radius: 5px 5px 0 0;
		-webkit-border-top-left-radius: 5px;
		-webkit-border-top-right-radius: 5px;
	}

	.tabs li a:hover {
		background-color: #dddddd;
	}

	.tabs li.active a {
		border-bottom: 1px solid #fff;
		background-color: #fff;
		padding: 4px 6px 5px 6px;
	}

	.tabs li.active a:hover {
	}

	.tabs li a.icon_accept {
		background-image: url('accept.png');
		background-position: 5px;
		background-repeat: no-repeat;
		padding-left: 24px;
	}

	.tabs li a.icon_accept:hover {
		padding-left: 24px;
	}

	.clearfix:before {
		display: table;
		content: " ";
	}

	.clearfix:after {
		display: table;
		content: " "; /* Older browser do not support empty content */
		clear: both;
		visibility: hidden;
		display: block;
		height: 0;
	}
</style>

php

	/* 사용자 정의 */
	// http://127.0.0.1/ci-426/public
	define('SCRIPT_NAME', $_SERVER['SCRIPT_NAME']); 
	define('HTTP_HTTPS', ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS']=='on') ? 's' : ''));

	define('HTTP_HOST', 'http'.HTTP_HTTPS.'://'.$_SERVER['HTTP_HOST']); 
	define('DOCUMENT_ROOT', $_SERVER['DOCUMENT_ROOT']);

	$root_path = str_replace(basename(SCRIPT_NAME), '', SCRIPT_NAME);
	$root_path = substr($root_path, 0, -1);
	if (empty($root_path)) {
		$root_path = '';
	}	
	$base_path = str_replace('/public' , '', $root_path);
	define('BASE_PATH', $base_path);
	define('ROOT_PATH', $root_path);
	
	define('HTTP_BASE', HTTP_HOST.BASE_PATH);
	define('DOC_BASE', DOCUMENT_ROOT.BASE_PATH);

	define('HTTP_ROOT', HTTP_HOST.ROOT_PATH); 
	define('DOC_ROOT', DOCUMENT_ROOT.ROOT_PATH);

	$request = \Config\Services::request();
	$uri = $request->uri;
	$TotalSegments = $uri->getTotalSegments();

	$seg_controller = $uri->getTotalSegments()>=1 ? $uri->getSegment(1) : '/';
	$seg_func       = $uri->getTotalSegments()>=2 ? $uri->getSegment(2) : '';
	$seg_table      = $uri->getTotalSegments()>=3 ? $uri->getSegment(3) : '';
	$seg_index      = $uri->getTotalSegments()>=4 ? $uri->getSegment(4) : '';

	<div class="tabs_wrapper">
		<div class="tabs_container">
			<ul id="tabs_info" class="tabs">
				<div class="tabs_pull_right">
					<span id="tab_prev"><a href="#">prev</a></span>
					<span id="tab_next"><a href="#">next</a></span>
				</div>
				<li><a href="#tab_seg" class="ahref">segments</a></li>
				<li><a href="#tab_path" class="ahref">path</a></li>
				<li class="active"><a href="#tab_doc" class="ahref">doc</a></li>
				<div class="clearfix"></div>
			</ul>
		</div>
		<div id="tabs_info_contents" class="tabs_contents_container">
			<div id="tab_seg" class="tab_contents">
				<?php
					echo 'TotalSegments : '.$TotalSegments.'<br>';
					echo 'seg_controller : '.$seg_controller.'<br>';
					echo 'seg_func : '.$seg_func.'<br>';
					echo 'seg_table : '.$seg_table.'<br>';
				?>
			</div>
			<div id="tab_path" class="tab_contents">
				<?php
					echo "HTTP_HOST => ".HTTP_HOST."<br>";
					echo "DOCUMENT_ROOT => ".DOCUMENT_ROOT."<br>"; 
					echo "<br>";
					echo "BASE_PATH => ".BASE_PATH."<br>"; 
					echo "ROOT_PATH => ".ROOT_PATH."<br>"; 
					echo "<br>";
					echo "HTTP_BASE => ".HTTP_BASE."<br>";
					echo "DOC_BASE => ".DOC_BASE."<br>";
					echo "<br>";
					echo "HTTP_ROOT => ".HTTP_ROOT."<br>";
					echo "DOC_ROOT => ".DOC_ROOT."<br>"; 
					echo "<br>";
					echo "base_url() => ".base_url()."<br>";
				?>
			</div>
			<div id="tab_doc" class="tab_contents">
				<a target="_blank" href="http://www.phpschool.com/">phpschool</a>
				<a target="_blank" href="http://www.tcpschool.com/">tcpschool</a>
				<a target="_blank" href="https://link2me.tistory.com/category">link2me</a>
				<br/><br/>
				<a target="_blank" href="https://www.php.net/manual/en/index.php">php</a>
				<a target="_blank" href="https://ko.javascript.info/">JavaScript</a>
				<a target="_blank" href="https://www.devkuma.com/">devkuma</a>
			</div>
		</div>
	</div>

js

	<script type="text/javascript" charset="utf-8">
		function has_class(items, className) 
		{
			//alert(JSON.stringify(items));
			for(var i = 0; i < items.length; i++) {
				var classlist = items[i].classList;
				for(var j = 0; j < classlist.length; j++) {
					if (classlist[j] == className) {
						return items[i];
					}
				}	
			}
			return false;
		}
		function item_prev(items, className) 
		{
	  		var item = has_class(items, className);
			for(var i = 0; i < items.length; i++) {
				if (items[i] == item) {
					if (i > 0) {
					    return items[i-1];
					}
				}	
			}
			return false;
		}
		function item_next(items, className) 
		{
	  		var item = has_class(items, className);
			for(var i = 0; i < items.length; i++) {
				if (items[i] == item) {
					if (i < items.length-1) {
					    return items[i+1];
					}
				}	
			}
			return false;
		}
  
		var tabs_info = document.getElementById("tabs_info");
		var tabList = tabs_info.getElementsByTagName("li")
		var tabs_info_contents = document.getElementById("tabs_info_contents");
		var contentList = tabs_info_contents.querySelectorAll('.tab_contents');
	    var tabs_active = "active";

		document.getElementById("tab_prev").onclick = function(event)
		{
			event.preventDefault();
			var item = item_prev(tabList, tabs_active);
			if (item) {
				item.querySelector('.ahref').click();
			}	
			return false;
		};

		document.getElementById("tab_next").onclick = function(event)
		{
			event.preventDefault();
			var item = item_next(tabList, tabs_active);
			if (item) {
				item.querySelector('.ahref').click();
			}	
			return false;
		};

		for(var i = 0; i < tabList.length; i++)
		{
			tabList[i].querySelector('.ahref').addEventListener('click', function(event)
			{
				event.preventDefault();
				for(var j = 0; j < tabList.length; j++) {
					tabList[j].classList.remove(tabs_active);
					contentList[j].style.display = 'none';
				}
				this.parentNode.classList.add(tabs_active);

				var selected_tab = this.getAttribute('href');
				document.querySelector(selected_tab).style.display = 'block';
				return false; 
			} );
		}
  		var item = has_class(tabList, tabs_active);
		if (item) {
			item.querySelector('.ahref').click();
		}	
	</script>