我一直在一个网站上显示不同地区的酒店列表。在第一页上，您可以单击地图以指向状态页面。我希望每个州页面的布局都相同，但我希望标题，背景和城市可以根据URL所指的状态而改变，而不是制作50 htmls。我不知道从哪里开始。
<html>
<head>
<title>State</title>
<meta name="viewport" content="width=device-width">
<link href= "css2/state.css" rel="stylesheet" type="text/css"/>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="/CFIDE/scripts/cfform.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function _CF_checkForm1(_CF_this)
{
if (!_CF_hasValue(_CF_this.City, "SELECT" ))
{
if (!_CF_onError(_CF_this, _CF_this.City, _CF_this.City.value, "Error in City text."))
{
return false;
}
}
return true;
}
//-->
</SCRIPT>
</head>
<body>
<div id= "wrapper">
<div id= "headercontent">
<a href="#">
<div id= "logo">
<img src= "images/logo.png" atl = "GTlogo" title = "GTlogo" width= "158"/></a>
</div>
<div id= "nav2">
<ul>
<li>
<a href="https://www.travelocity.com/Flights">Book Airline</a></li><li>
<a href="http://www.flightview.com/">Check Flight</a></li><li>
<a href="http://www.res99.com/cars/search.cgi?src=10005170">Car Rental</a></li><li>
<a href="https://weather.com/">Check Weather</a></li><li>
<a href="http://government-traveler.com/newsletter/newsletter.htm">Newsletter</a></li><li>
<a href="http://www.government-traveler.com"><img id = "home" src = "images/home.png" height= "23" width= "30"/></a></li>
</ul>
</div>
<div id = "box">
<div id = "subscribe">
<form name= "form1" method="post" action= "http://www.americas-traveler.com/MLaction20.cfm" class="clearfix">
<div>
<p id = "sub-text">Subscribe to our newsletter!</p>
</div>
<div id = "substuff" size= "viewport">
<email
label for = "submit" class = "submit-icon">
</label>
<input name= "email" id="textified" class= "fieldtxt" placeholder= "Your Email" autocomplete= "off" type="text" size= "viewport"/>
<input type= "submit" id = "submit" size="viewport" /></div>
</div>
</form>
</div>
</div>
</div>
<div id= "nav">
<div id= "nav_wrapper">
<ul>
<li>
<a href="http://www.travelerseries.com/us.htm">Contact Us</a></li><li>
<a href="http://www.govhotel.us/marketing/marketing.htm">Advertise</a></li><li>
<a href= "http://www.gsa.gov/portal/content/104877">Per Diem</a><li>
<a href="#">Other Sites</a>
<ul>
<li><a href= "Americas-Traveler.com"> Americas Traveler</a></li>
<li><a href= "Motorsport-Traveler.com<"> Motorsport Traveler</a></li>
<li><a href= "Golf-traveler.com"> Golf Traveler</a></li>
<li><a href= "http://www.cruiseline-traveler.com/"> Cruiseline Traveler</a></li>
<li><a href= "http://www.canadian-traveler.com/"> Canadian Traveler</a></li>
<li><a href= "http://www.british-traveler.com/"> British Traveler</a></li>
</ul>
</li>
</ul>
</div>
</div>
<FORM NAME="Form1" ACTION="citypage.cfm?State=WA" METHOD="POST" onSubmit="return _CF_checkForm1(this)">
<SELECT NAME="City" SIZE="9" STYLE="width:200px"><OPTION VALUE="Aberdeen">Aberdeen<OPTION VALUE="Airway Heights">Airway Heights<OPTION VALUE="Anacortes">Anacortes<OPTION VALUE="Arlington">Arlington<OPTION VALUE="Auburn">Auburn<OPTION VALUE="Bainbridge Island">Bainbridge Island<OPTION VALUE="Bellevue">Bellevue<OPTION VALUE="Bellingham">Bellingham<OPTION VALUE="Blaine">Blaine<OPTION VALUE="Bothell">Bothell<OPTION VALUE="Bremerton">Bremerton<OPTION VALUE="Buckley">Buckley<OPTION VALUE="Burien">Burien<OPTION VALUE="Burlington">Burlington<OPTION VALUE="Camano Island">Camano Island<OPTION VALUE="Carson">Carson<OPTION VALUE="Cashmere">Cashmere<OPTION VALUE="Cathlamet">Cathlamet<OPTION VALUE="Centralia">Centralia<OPTION VALUE="Chehalis">Chehalis<OPTION VALUE="Chelan">Chelan<OPTION VALUE="Cheney">Cheney<OPTION VALUE="Clarkston">Clarkston<OPTION VALUE="Cle Elum">Cle Elum<OPTION VALUE="Colfax">Colfax<OPTION VALUE="Colville">Colville<OPTION VALUE="Coupeville">Coupeville<OPTION VALUE="Crystal Mountain">Crystal Mountain<OPTION VALUE="Dayton">Dayton<OPTION VALUE="Des Moines">Des Moines<OPTION VALUE="DuPont">DuPont<OPTION VALUE="Dupont">Dupont<OPTION VALUE="East Wenatchee">East Wenatchee<OPTION VALUE="Edmonds">Edmonds<OPTION VALUE="Ellensburg">Ellensburg<OPTION VALUE="Elma">Elma<OPTION VALUE="Ephrata">Ephrata<OPTION VALUE="Everett">Everett<OPTION VALUE="Federal Way">Federal Way<OPTION VALUE="Ferndale">Ferndale<OPTION VALUE="Fife">Fife<OPTION VALUE="Forks">Forks<OPTION VALUE="Fort Lewis">Fort Lewis<OPTION VALUE="Friday Harbor">Friday Harbor<OPTION VALUE="Gig Harbor">Gig Harbor<OPTION VALUE="Goldendale">Goldendale<OPTION VALUE="Grand Mound">Grand Mound<OPTION VALUE="Hoquiam">Hoquiam<OPTION VALUE="Husum">Husum<OPTION VALUE="Issaquah">Issaquah<OPTION VALUE="Kalama">Kalama<OPTION VALUE="Kelso">Kelso<OPTION VALUE="Kennewick">Kennewick<OPTION VALUE="Kent">Kent<OPTION VALUE="Kirkland">Kirkland<OPTION VALUE="La Conner">La Conner<OPTION VALUE="Lacey">Lacey<OPTION VALUE="Lakewood">Lakewood<OPTION VALUE="Langley">Langley<OPTION VALUE="Leavenworth">Leavenworth<OPTION VALUE="Liberty Lake">Liberty Lake<OPTION VALUE="Long Beach">Long Beach<OPTION VALUE="Longview">Longview<OPTION VALUE="Lynden">Lynden<OPTION VALUE="Lynnwood">Lynnwood<OPTION VALUE="Maple Valley">Maple Valley<OPTION VALUE="Marysville">Marysville<OPTION VALUE="Monroe">Monroe<OPTION VALUE="Moses Lake">Moses Lake<OPTION VALUE="Mount Rainier">Mount Rainier<OPTION VALUE="Mount Vernon">Mount Vernon<OPTION VALUE="Mountlake Terrace">Mountlake Terrace<OPTION VALUE="Mukilteo">Mukilteo<OPTION VALUE="Oak Harbor">Oak Harbor<OPTION VALUE="Ocean Park">Ocean Park<OPTION VALUE="Ocean Shores">Ocean Shores<OPTION VALUE="Okanogan">Okanogan<OPTION VALUE="Olympia">Olympia<OPTION VALUE="Omak">Omak<OPTION VALUE="Othello">Othello<OPTION VALUE="Pacific">Pacific<OPTION VALUE="Pasco">Pasco<OPTION VALUE="Port Angeles">Port Angeles<OPTION VALUE="Port Ludlow">Port Ludlow<OPTION VALUE="Port Orchard">Port Orchard<OPTION VALUE="Port Townsend">Port Townsend<OPTION VALUE="Poulsbo">Poulsbo<OPTION VALUE="Prosser">Prosser<OPTION VALUE="Pullman">Pullman<OPTION VALUE="Puyallup">Puyallup<OPTION VALUE="Quinault">Quinault<OPTION VALUE="Quincy">Quincy<OPTION VALUE="Redmond">Redmond<OPTION VALUE="Renton">Renton<OPTION VALUE="Richland">Richland<OPTION VALUE="Ritzville">Ritzville<OPTION VALUE="Rochester">Rochester<OPTION VALUE="SeaTac">SeaTac<OPTION VALUE="Seattle">Seattle<OPTION VALUE="Sedro-Woolley">Sedro-Woolley<OPTION VALUE="Sequim">Sequim<OPTION VALUE="Shelton">Shelton<OPTION VALUE="Silverdale">Silverdale<OPTION VALUE="Snohomish">Snohomish<OPTION VALUE="Snoqualmie">Snoqualmie<OPTION VALUE="Spokane">Spokane<OPTION VALUE="Spokane Valley">Spokane Valley<OPTION VALUE="Stevenson">Stevenson<OPTION VALUE="Sumner">Sumner<OPTION VALUE="Sunnyside">Sunnyside<OPTION VALUE="Tacoma">Tacoma<OPTION VALUE="Tacoma - Fife">Tacoma - Fife<OPTION VALUE="Toppenish">Toppenish<OPTION VALUE="Tukwila">Tukwila<OPTION VALUE="Tulalip">Tulalip<OPTION VALUE="Tumwater">Tumwater<OPTION VALUE="Union">Union<OPTION VALUE="Union Gap">Union Gap<OPTION VALUE="Vancouver">Vancouver<OPTION VALUE="Walla Walla">Walla Walla<OPTION VALUE="Washington">Washington<OPTION VALUE="Washougal">Washougal<OPTION VALUE="Wenatchee">Wenatchee<OPTION VALUE="Westport">Westport<OPTION VALUE="Winthrop">Winthrop<OPTION VALUE="Woodinville">Woodinville<OPTION VALUE="Woodland">Woodland<OPTION VALUE="Yakima">Yakima<OPTION VALUE="Yelm">Yelm<OPTION VALUE="Zillah">Zillah
</SELECT>
<input type="Submit" value="Submit">
</FORM>
</body>
</html>
答案 0 :(得分：0)
好吧，我会给你PHP示例，也许你可以根据需要调整它。
// Declare your state.
var my_state = "<?= $_REQUEST['state'] ?>";
// Array with all state images.
var state_images = {
...
montana: 'image/url/here.jpg',
...
};
// Array with all cities.
var state_cities = {
...
montana: ['missoula', 'great falls', ...],
...
};
// Populate the title.
jQuery('.my-title-element').text(my_state);
// Populate the cities.
... Bunch of different ways to do this.
// Populate the image.
jQuery('.my-image-element').attr('src', state_images[my_state]);
确实有很多方法可以做到这一点。这是一种方法的基本概述。老实说甚至不是我会采用的方法，但它是基本的。城市应该通过api或其他东西填充。